Javascript 物料界面-反复打开按钮下拉列表（Typescript）

我正在尝试创建一个导航，您可以将鼠标悬停在按钮上，然后从下拉列表中选择一个选项。只要您没有单击其中一个选项或离开按钮或下拉菜单，下拉列表就应该保持打开状态。
当前，一旦打开下拉列表，MouseLeave上的按钮就会触发。我注意到原因可能是一个透明的div，没有从某处出现的内容，覆盖了整个页面

也许在MaterialUI中有一个我错过的组件可以让这更容易。我试过爆米花，但没有成功

代码沙盒：

import React，{useffect}来自“React”；
从“@material ui/core”导入{按钮、列表、列表项、菜单、菜单项}；
导出默认函数导航（）{
const[anchor，setAnchor]=React.useState（null）；
const[mouseOverButton，setMouseOverButton]=React.useState（false）；
const[mouseOverMenu，setMouseOverMenu]=React.useState（false）；
const[open，setOpen]=React.useState（false）；
常数超时时间=200；
useffect（（）=>{
常量鼠标=（）=>{
如果（鼠标切换菜单| |鼠标切换按钮）{
setOpen（真）；
}否则{
setOpen（假）；
setAnchor（null）；
}
}
检查鼠标（）；
}，[mouseOverButton，mouseOverMenu]）
常量handleClose=（）=>{
setAnchor（null）；
setMouseOverMenu（假）；
setMouseOverButton（假）；
};
常量enterButton=（事件：React.MouseEvent）=>{
setMouseOverButton（true）；
setAnchor（event.currentTarget）；
};
const leaveButton=（）=>{
设置超时（（）=>{
setMouseOverButton（假）；
}，超时时间）
};
常量输入菜单=（）=>{
setMouseOverMenu（真）；
};
const leaveMenu=（）=>{
设置超时（（）=>{
setMouseOverMenu（假）；
}，超时时间）
};
返回(
停靠菜单
选择1
选择2
选择3
)
}

import React, {useEffect} from "react";
import {Button, List, ListItem, Menu, MenuItem} from "@material-ui/core";


export default function Navigation() {

    const [anchor, setAnchor] = React.useState<null | HTMLElement>(null);
    const [mouseOverButton, setMouseOverButton] = React.useState(false);
    const [mouseOverMenu, setMouseOverMenu] = React.useState(false);
    const [open, setOpen] = React.useState(false);

    const timeoutTime = 200;

    useEffect(() => {
        const checkMouse = () => {
            if (mouseOverMenu || mouseOverButton) {
                setOpen(true);
            } else {
                setOpen(false);
                setAnchor(null);
            }
        }
        checkMouse();
    }, [mouseOverButton, mouseOverMenu])

    const handleClose = () => {
        setAnchor(null);
        setMouseOverMenu(false);
        setMouseOverButton(false);
    };

    const enterButton = (event: React.MouseEvent<HTMLButtonElement>) => {
        setMouseOverButton(true);
        setAnchor(event.currentTarget);
    };

    const leaveButton = () => {
        setTimeout(() => {
            setMouseOverButton(false);
        }, timeoutTime)
    };

    const enterMenu = () => {
        setMouseOverMenu(true);
    };

    const leaveMenu = () => {
        setTimeout(() => {
            setMouseOverMenu(false);
        }, timeoutTime)
    };


    return (
        <div>
            <List>
                <ListItem>
                    <Button
                        onMouseEnter={enterButton}
                        onMouseLeave={leaveButton}
                    >
                        HoverMenu
                    </Button>

                    <Menu
                        id="Wir"
                        open={open}
                        anchorEl={anchor}
                        getContentAnchorEl={null}
                        anchorOrigin={{vertical: "bottom", horizontal: "center"}}
                        transformOrigin={{vertical: "top", horizontal: "center"}}
                        onClose={handleClose}
                        MenuListProps={{
                            onMouseEnter: enterMenu,
                            onMouseLeave: leaveMenu,
                        }}
                        disableScrollLock
                    >
                        <MenuItem onClick={handleClose}>Option 1</MenuItem>
                        <MenuItem onClick={handleClose}>Option 2</MenuItem>
                        <MenuItem onClick={handleClose}>Option 3</MenuItem>
                    </Menu>
                </ListItem>
            </List>
        </div>
    )
}