Mui dropdown menu is not close in onMouseLeave

I have a menu. in some MenuItems must appear submenu while hovering.

onMouseOver is working correctly but when i leave mouse from menuitem it is not closing

here is my functions

const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);


const handleClick = (event) => {
    if (anchorEl !== event.currentTarget) {
        setAnchorEl(event.currentTarget);
    }
};
const handleClose = () => {
    setAnchorEl(null);
};

const navConf = NavigateConfig();

here is my Jsx

                    <MenuList sx={{
                    display: { xs: 'none', lg: 'block' }, display: 'flex'
                }}>
                    {navConf.map((item) => (
                        <>
                            <MenuItem
                                // id="simple-menu"
                                onMouseOver={item.child ? (e) => handleClick(e) : () => { }}
                                aria-owns={anchorEl ? "simple-menu" : undefined}
                                aria-haspopup="true"
                            >
                                {item.title}
                                {anchorEl &&
                                    <Menu
                                        id="simple-menu"
                                        anchorEl={anchorEl}
                                        open={open}
                                        onClose={handleClose}
                                        MenuListProps={{ onMouseLeave: handleClose, 'aria-labelledby': 'simple-menu', }}
                                        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
                                        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
                                    >
                                        <div className='topDiv'></div>
                                        {item.child?.map((e) => {
                                            return <MenuItem>{e.title}</MenuItem>
                                        })}
                                    </Menu>}
                            </MenuItem>
                        </>
                    ))}
                    <LanguagePopover />

                </MenuList>

submenu is disappearing when i click outside of it