[bug]: Passing in a custom component into the popover component does not behave as expected

[carolinar7]

Describe the bug

I've create a custom component SidebarPopover whose props include popoverTrigger of type React.ReactNode. Component essentially looks like this:

<Popover>
  <PopoverTrigger asChild>
    {popoverTrigger}
  </PopoverTrigger>
  <PopoverContent className="w-80 h-80">
    {popoverContent}
  </PopoverContent>
</Popover>

I've been attempting to pass in a custom component that I created, SidebarButton, into my custom SidebarPopover component through the popoverTrigger prop. SidebarButton looks something like this:

<Button className="max-w-fit h-18 rounded-none p-2 m-1">
  <Image src={imageIcon} alt={alt} width={50} height={50} />
</Button>

Passing in SidebarButton into SidebarPopover does not display the popover as expected. HOWEVER, if I directly pass in:

const popover = <Button className="max-w-fit h-18 rounded-none p-2 m-1"><Image src={button.image} alt={button.alt} width={50} height={50}/></Button>

into my custom SidebarPopover, the popover appears?!? I would expect that passing in the above, and the SidebarButton component should yield the same behavior, but this is not the case.

In both cases Button is the shadcn ui component and Image is from Next.js' libraries.

Affected component/components

Popover

How to reproduce

1. Create the sidebar popover custom component mentioned in the description
2. Create the custom sidebar button mentioned in the description above
3. Pass in the custom sidebar button into the sidebar popover custom component as a prop
4. Observe that no popover appears when clicking on the sidebar button
5. Pass in the JSX directly into the sidebar popover custom component and observe that the popover now appears

Codesandbox/StackBlitz link

https://codesandbox.io/p/github/carolinar7/react-practice/shadcn-bug-popover-bug-report

Logs

No response

System Info

Windows 11, Chrome

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues