MUI v5.10.0中AppBar内下拉菜单对齐异常求助

我在React项目中使用MUI v5.10.0，参照MUI官方账户菜单示例开发AppBar下拉菜单，但出现对齐异常：

• 当设置anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}时，菜单从窗口底部开始显示
• 当设置anchorOrigin={{ horizontal: 'right', vertical: 'top' }}时，菜单从窗口顶部开始，且与用户头像中部对齐

尝试过添加getContentAnchorEl={null}的常见解决方案，但对当前情况无效。以下是我的代码：

//** 样式组件 **//
const StyledToolbar = styled(Toolbar)({
  display: "flex",
  justifyContent: "space-between",
  backgroundColor: "#1e8e3e",
});


//** 状态 **// 
const [anchorEl, setAnchorEl] = useState(false);
const open = Boolean(anchorEl);


//** 菜单代码 **//
<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>

异常效果截图 #

• 设置anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}时：
  

• 设置anchorOrigin={{ horizontal: 'right', vertical: 'top' }}时：
  

内容的提问来源于stack exchange，提问作者Udayendu