How to open and close menu by event 'onMouseOver&onMouseLeave' in React JS Material ui

I'm beginner to react JS and I want to show a drop-down list of items whenever a user hovers on the button without having to click on the button for this I have tried this below code but it is not working fine.

I have referred this example and here showing only onMouseOver event but I want to use onMouseOver&onMouseLeave this two events when use Over and Leave the button.

Suggest me where I did the mistake and how to achieve this.

import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Fade from '@mui/material/Fade';
import { Container,Link } from '@mui/material';


function FadeMenu() {

const [anchorEl, setAnchorEl] = React.useState(null);
const [open, setOpen] = React.useState(false);

    const handleOver = (event) => {
        setAnchorEl(event.currentTarget);
setOpen(true);
    }

    const handleLeave = (event) => {

        setAnchorEl(null);
        setOpen(false);
    }

    const handleClose = (event) => {
        setAnchorEl(null);
    };

 return (

<Button
                id="about-fade-button"
                aria-controls="about-fade-menu"
                aria-haspopup="true"
                aria-expanded={open ? 'about-fade-menu' : 'false'}
                onMouseOver={handleOver}
                onMouseLeave={handleLeave}
                sx={{cursor:"pointer",textTransform:"none",fontSize:"14px",
                '&:hover':{color:"#30B54B",textDecoration:"underline",
            textDecorationThickness:"2px"},}}
            >
                About
            </Button>
            <Menu
                id="about-fade-menu"
                MenuListProps={{
                    'aria-labelledby': 'about-fade-button',
                }}
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                TransitionComponent={Fade}
            >
                <MenuItem onClick={handleClose}>1</MenuItem>
                <MenuItem onClick={handleClose}>2</MenuItem>
                <MenuItem onClick={handleClose}>3</MenuItem>
            </Menu>



            <Button
                id="helpcenter-fade-button"
                aria-controls="helpcenter-fade-menu"
                aria-haspopup="true"
                aria-expanded={open ? 'helpcenter-fade-menu' : 'false'}
                onMouseOver={handleOver}
                onMouseLeave={handleLeave}
                sx={{cursor:"pointer",textTransform:"none",fontSize:"14px",
                '&:hover':{color:"#30B54B",textDecoration:"underline",textDecorationStyle:"solid",
            textDecorationThickness:"2px"},}}
            >
                Help Center
            </Button>
            <Menu
                id="helpcenter-fade-menu"
                MenuListProps={{
                    'aria-labelledby': 'helpcenter-fade-button',
                }}
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                TransitionComponent={Fade}
            >
                <MenuItem onClick={handleClose}>4</MenuItem>
                <MenuItem onClick={handleClose}>5</MenuItem>
                <MenuItem onClick={handleClose}>6</MenuItem>
            </Menu>

);

}

export default FadeMenu;