Reactjs onMouseLeave Doesn't work until i move cursor outside of whole page

Question

I'm using MUi and React, onMouseEnter works actually fine, but onMouseLeave doesn't work until i put cursor out of page.

What's the solution really? is there any lack of codes? Thanks.

I wrote everything that is needed to write here but i needed more typing so stackoverflow let me ask my question.

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>
  );
}