Why does using SidebarMenuButton inside DropdownMenuTrigger cause an error?

[realmorrisliu]

I installed sidebar-09 in my project using the command pnpm dlx shadcn@latest add sidebar-09, but when running the project, I encounter the error below. Additionally, unlike the example shown in this link, clicking on the user avatar doesn’t open the dropdown menu as expected.

Could you help me understand why this is happening?

[Error] Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `SlotClone`.
SidebarMenuButton@http://localhost:1420/src/components/ui/sidebar.tsx:691:10
SlotClone@http://localhost:1420/node_modules/.vite/deps/chunk-6TMFFXV2.js:73:43
Slot@http://localhost:1420/node_modules/.vite/deps/chunk-6TMFFXV2.js:54:43
Primitive.button@http://localhost:1420/node_modules/.vite/deps/chunk-CTV5ZQLD.js:41:49
SlotClone@http://localhost:1420/node_modules/.vite/deps/chunk-6TMFFXV2.js:73:43
Slot@http://localhost:1420/node_modules/.vite/deps/chunk-6TMFFXV2.js:54:43
Primitive.div@http://localhost:1420/node_modules/.vite/deps/chunk-CTV5ZQLD.js:41:49
PopperAnchor@http://localhost:1420/node_modules/.vite/deps/chunk-4F73KET5.js:1927:64
MenuAnchor@http://localhost:1420/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js:409:50
DropdownMenuTrigger@http://localhost:1420/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js:1207:77
DropdownMenuTrigger@http://localhost:1420/src/components/ui/dropdown-menu.tsx:41:30
MenuProvider@http://localhost:1420/node_modules/.vite/deps/chunk-GPNQXEHS.js:43:52
MenuProvider@http://localhost:1420/node_modules/.vite/deps/chunk-GPNQXEHS.js:43:52
PopperProvider@http://localhost:1420/node_modules/.vite/deps/chunk-GPNQXEHS.js:43:52
Popper@http://localhost:1420/node_modules/.vite/deps/chunk-4F73KET5.js:1919:44
Menu@http://localhost:1420/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js:363:89
DropdownMenuProvider@http://localhost:1420/node_modules/.vite/deps/chunk-GPNQXEHS.js:43:52
DropdownMenu@http://localhost:1420/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js:1180:12
DropdownMenu@http://localhost:1420/src/components/ui/dropdown-menu.tsx:21:23
li
SidebarMenuItem@http://localhost:1420/src/components/ui/sidebar.tsx:650:37
ul
SidebarMenu@http://localhost:1420/src/components/ui/sidebar.tsx:630:33
NavUser@http://localhost:1420/src/components/nav-user.tsx:48:7
div
SidebarFooter@http://localhost:1420/src/components/ui/sidebar.tsx:461:35
div
Sidebar@http://localhost:1420/src/components/ui/sidebar.tsx:148:7
div
div
div
Sidebar@http://localhost:1420/src/components/ui/sidebar.tsx:148:7
AppSidebar@http://localhost:1420/src/components/app-sidebar.tsx:147:28
div
TooltipProviderProvider@http://localhost:1420/node_modules/.vite/deps/chunk-GPNQXEHS.js:43:52
TooltipProvider@http://localhost:1420/node_modules/.vite/deps/@radix-ui_react-tooltip.js:97:12
TooltipProvider@http://localhost:1420/src/components/ui/tooltip.tsx:21:16
SidebarProvider@http://localhost:1420/src/components/ui/sidebar.tsx:58:14
Page
App