Hope you all are doing well!

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. I need to make it work; I am struggling with this since weeks.

/* Parent Component */
import { useRef } from 'react'
import SidebarMenuElement from '@/Layouts/Authenticated/Partials/Sidebar/MenuElement'

export default function Sidebar() {
    const sidebarMenuElementRef = useRef()

    return (
        <>
            <div>
                <div
                    className="h-full w-[inherit] overflow-y-auto scroll-smooth"
                    style={{ scrollbarGutter: 'stable both-edges' }}
                    onScroll={() => sidebarMenuElementRef.current}
                >
                    <nav>
                        <div>
                            <ul>
                                {navigation.map((item, i) => (
                                    <li key={item.name}>
                                        <SidebarMenuElement
                                            data={item}
                                            ref={sidebarMenuElementRef}
                                        />
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </>
    )
}

/* 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