React MUI Menu does not close - reactjs

Question

I'm doing some practice with material on react but i've encountered a problem with menu.
The weird thing is that i have two IconButton components,
if I put the onClick that set the anchor element on the first IconButton, all works well.
If I put the onClick that set the anchor element on the second IconButton, the menu will never close..
why it happens? and how to solve it?
here is the code:
import React from 'react';
import AppBar from '#mui/material/AppBar';
import Toolbar from '#mui/material/Toolbar';
import Avatar from '#mui/material/Avatar';
import Menu from '#mui/material/Menu';
import MenuItem from '#mui/material/MenuItem';
import IconButton from '#mui/material/IconButton';
import MenuIcon from '#mui/icons-material/Menu';
import AccountIcon from '#mui/icons-material/AccountCircle';
function TopComp(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
const isMenuOpen = Boolean(anchorEl);
const handleMenuClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
return (
<div style={{ marginBottom: '30px' }}>
<AppBar position="static" color="primary">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
//onClick={(event) => handleMenuClick(event)}
>
<MenuIcon />
</IconButton>
<div style={{ marginLeft: 'auto' }}>
<IconButton
size="large"
edge="end"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
onClick={(event) => handleMenuClick(event)}
>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={isMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
<MenuItem onClick={handleMenuClose}>Logout</MenuItem>
</Menu>
<Avatar>
<AccountIcon />
</Avatar>
</IconButton>
</div>
</Toolbar>
</AppBar>
</div>
);
}
export default TopComp;

Answer 1

Put your Menu component out of the IconButtons :-
import React from 'react';
import AppBar from '#mui/material/AppBar';
import Toolbar from '#mui/material/Toolbar';
import Avatar from '#mui/material/Avatar';
import Menu from '#mui/material/Menu';
import MenuItem from '#mui/material/MenuItem';
import IconButton from '#mui/material/IconButton';
import MenuIcon from '#mui/icons-material/Menu';
import AccountIcon from '#mui/icons-material/AccountCircle';
function TopComp(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
const isMenuOpen = Boolean(anchorEl);
const handleMenuClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
return (
<div style={{ marginBottom: '30px' }}>
<AppBar position="static" color="primary">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
onClick={(event) => handleMenuClick(event)}
>
<MenuIcon />
</IconButton>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={isMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
<MenuItem onClick={handleMenuClose}>Logout</MenuItem>
</Menu>
<div style={{ marginLeft: 'auto' }}>
<IconButton
size="large"
edge="end"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
onClick={(event) => handleMenuClick(event)}
>
<Avatar>
<AccountIcon />
</Avatar>
</IconButton>
</div>
</Toolbar>
</AppBar>
</div>
);
}
export default TopComp;
On codesandbox.io