Estoy usando MUi y React, onMouseEnter funciona realmente bien, pero onMouseLeave no funciona hasta que saco el cursor de la página.

¿Cuál es la solución realmente? ¿Hay alguna falta de códigos? Gracias.

Escribí todo lo que se necesita para escribir aquí, pero necesitaba escribir más, así que stackoverflow me dejó hacer mi pregunta.

 export default function Home() { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; return ( <Box p={20}> <Grid container spacing={5}> <Grid Item> <Button variant="contained" id="fade-button" aria-controls={open ? "fade-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} onMouseEnter={handleClick} > Hover Menu </Button> <Menu id="fade-menu" MenuListProps={{ "aria-labelledby": "fade-button", }} anchorEl={anchorEl} open={open} onMouseLeave={handleClose} TransitionComponent={Fade} > <MenuItem onClick={handleClose}>Profile</MenuItem> <MenuItem onClick={handleClose}>My account</MenuItem> <MenuItem onClick={handleClose}>Logout</MenuItem> </Menu> </Grid> </Grid> </Box> ); }