DropDown menu is not aligning correctly in AppBar - reactjs

Question

I am using MUI with react. The dropdown menu is not aligning correctly. I am following https://mui.com/material-ui/react-menu/#account-menu document.
My text code:
//** A styled component **//
const StyledToolbar = styled(Toolbar)({
display: "flex",
justifyContent: "space-between",
backgroundColor: "#1e8e3e",
});
//** States **//
const [anchorEl, setAnchorEl] = useState(false);
const open = Boolean(anchorEl);
//** Actual Menu code **//
<Menu
id="account-menu"
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={(e) => setAnchorEl(false)}
onClick={(e) => setAnchorEl(false)}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
PaperProps={{
elevation: 0,
sx: {
overflow: 'visible',
filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
mt: 1.5,
'& .MuiAvatar-root': {
width: 32,
height: 32,
ml: -0.5,
mr: 1,
},
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: 'background.paper',
transform: 'translateY(-50%) rotate(45deg)',
zIndex: 0,
},
},
}}
>
<MenuItem>
<Typography variant="span">John K.</Typography>
</MenuItem>
<Divider />
<MenuItem>
<Avatar
sx={{ bgcolor: green[500], margin: ".5rem", width: 24, height: 24 }}
/>
Profile
</MenuItem>
<MenuItem>
<ListItemIcon sx={{ color: green[500], margin: ".5rem" }}>
<Settings fontSize="small" />
</ListItemIcon>
Settings
</MenuItem>
<Divider />
<MenuItem onClick={handleSignOut}>
<ListItemIcon sx={{ color: "#f50057", margin: ".5rem" }}>
<Logout fontSize="small" />
</ListItemIcon>
Logout
</MenuItem>
{error && <span className="span">Something went wrong!</span>}
</Menu>
If I am using the anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} the Menu is starting from the bottom of the window:
If I am using the anchorOrigin={{ horizontal: 'right', vertical: 'top' }} the Menu is starting from the top of the window but from the middle of the user profile image:
For many people, applying getContentAnchorEl={null} fixed the issue but for me its not working. I am using MUI v5.10.0

Answer 1

You need to specify an element to work as a reference, like an anchor, for the Menu to open from it. Or else it will just show in an edge of the page depending the anchorOrigin property settings you specify on the Menu component.
<>
<Button
id="basic-button"
aria-controls={open ? "basic-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
Menu
</Button>
<Menu
id="account-menu"
anchorEl={anchorEl}
keepMounted
open={open}
onClose={(e) => setAnchorEl(false)}
onClick={(e) => setAnchorEl(false)}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
transformOrigin={{ horizontal: "right", vertical: "top" }}
PaperProps={{
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 1.5,
"& .MuiAvatar-root": {
width: 32,
height: 32,
ml: -0.5,
mr: 1
},
"&:before": {
content: '""',
display: "block",
position: "absolute",
top: 0,
right: 14,
width: 10,
height: 10,
bgcolor: "background.paper",
transform: "translateY(-50%) rotate(45deg)",
zIndex: 0
}
}
}}
>
<MenuItem>
<Typography variant="span">John K.</Typography>
</MenuItem>
<Divider />
<MenuItem>
<Avatar
sx={{ bgcolor: "green", margin: ".5rem", width: 24, height: 24 }}
/>
Profile
</MenuItem>
<MenuItem>
<ListItemIcon sx={{ color: "green", margin: ".5rem" }}>
<Settings fontSize="small" />
</ListItemIcon>
Settings
</MenuItem>
<Divider />
<MenuItem
>
<ListItemIcon sx={{ color: "#f50057", margin: ".5rem" }}>
<Logout fontSize="small" />
</ListItemIcon>
Logout
</MenuItem>
</Menu>
<>
Here is the working codesanbox

Answer 2

Current target was missing in the code. After applying the following code, able to fix it:
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
<Button
id="basic-button"
aria-controls={open ? "basic-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick} /* Need to include this to set the target pointer */
>
And remove getContentAnchorEl={null} entry from the <Menu>. Else it may generate the following error:
Warning: React does not recognize the `getContentAnchorEl` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `getcontentanchorel` instead. If you accidentally passed it from a parent component, remove it from the DOM element.