Correct way to create or set a popover ref

[Cuttsy27]

What is the correct way to create a ref for a popover div for usePopover in the latest version of react-aria? Some examples create the ref only inside the Popover component while some pass a popoverRef prop to the Popover component and others create the Popover component with forwardRef. How do I know when a Popover needs a ref passed from a parent component or when it can use an internally-created one?

I'm having a strange issue where opening the popover causes it to actually appear somewhere else on the page and not near the trigger - not sure if its related to the ref or not but the question remains :)

Thanks

[Cuttsy27]

I've found the source of my issue where the popover appears at the wrong location on the screen. I am passing the PopoverTrigger component a type prop to determine if the trigger is an icon or a text button which conditionally renders the corresponding component and assigns the ref to it. How can I conditionally render the trigger component with the ref? Is wrapping the conditional render logic with a div and assigning the ref on the div the best way or would that cause other issues with button click/open state?

Conditional buttons:

        {type === 'icon' ? (
          <IconButton
            icon={icon}
            {...triggerProps}
            ref={ref}
          />
        ) : (
          <Button {...triggerProps} ref={ref}>{label}</Button>
        )}

Wrapping div:

     <div ref={ref}>
        {type === 'icon' ? (
          <IconButton
            icon={icon}
            {...triggerProps}
          />
        ) : (
          <Button {...triggerProps}>{label}</Button>
        )}
     </div>