Unable to manually close Menu Component

[RobinMalfait]

Discussed in https://github.com/tailwindlabs/headlessui/discussions/3371

^{Originally posted by **sahebyuvrajsingh** July 7, 2024} **What package within Headless UI are you using?** @headlessui/react **What version of that package are you using?** v2.0.4 **What browser are you using?** Chrome & Edge **Describe your issue** I am able to close the HeadlessUI Menu component when I call the function through `onScroll` event within the child component but when I am passing it to the parent component and calling the same function through `onScroll` method in parent component, it's not working as its meant to be, please can someone spare some time to have a look where is the error. Is it the way HeadlessUI works or it's just a bug which is not yet fixed. I need to make it work; I am struggling with this since weeks. Thanks! **Minimal reproduction** https://codesandbox.io/p/devbox/fancy-tree-x3vs7x  ``` /* Parent Component */ import { useRef } from 'react' import SidebarMenuElement from '@/Layouts/Authenticated/Partials/Sidebar/MenuElement' export default function Sidebar() { const sidebarMenuElementRef = useRef() return ( <>

sidebarMenuElementRef.current} >

{navigation.map((item, i) => (
))}

    </>
)

}

/ Child Component / import { useRef, forwardRef, useImperativeHandle } from 'react' import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react' import { Link } from '@inertiajs/react'

const SidebarMenuElement = forwardRef(function SidebarMenuElement(props, ref) { const { data } = props

const menuButtonElementRef = useRef(() => {})

useImperativeHandle(ref, () => () => menuButtonElementRef.current())

return (
    <>
        <Menu>
            {({ close }) => (
                <>
                    <MenuButton
                        ref={() => (menuButtonElementRef.current = close)}
                    >
                        <span>
                            <data.icon />
                        </span>
                    </MenuButton>
                    <MenuItems onScroll={menuButtonElementRef.current}>
                        <MenuItem>
                            <Link />
                        </MenuItem>
                    </MenuItems>
                </>
            )}
        </Menu>
    </>
)

})

export default SidebarMenuElement

</div>