Iam new to reactjs. My problem is that I want the menu to disappear if the mouse leaves that area, so I tried onMouseOut and onMouseLeave to close the menu but it seems that when this option is there the menu never opens! But when I remove the onMouseOver or Leave then it works fine but just stays there if you don't click something. MenuListProps={{ onMouseLeave: handleClose }}

That happens because when i open the menu, a modal layout is placed over the whole page, that means the onMouseLeave event will be fired immediately after onMouseEnter. but for it to work i must change the menu anchor so that it covers the button in its entirety

<div>
            {menuItem.map((text) => (
              <Button               
                onClick={(e) => handleChangeMenu(text, e)}
                onMouseOver={(e) => handleHover(text, e)}>
                {text}            
              </Button>
            ))}
            <Menu
              transitionDuration={700}
              anchorEl={project}
              open={Boolean(project)}
              onClose={() => {
                setproject(null);
              }}
              MenuListProps={{
                onMouseLeave: () => {
                  setproject(null);
                },
              }}
            >
              {mySubMenu.map((text) => (
                <MenuItem sx={menuItemStyle}>{text}</MenuItem>
              ))}
            </Menu>
          </div>