Reactjs 下拉菜单在 AppBar 中未正确对齐

我正在使用带有Reaction的MUI.下拉菜单未正确对齐.我正在关注https://mui.com/material-ui/react-menu/#account-menu号文件.

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>

• 如果我使用的是anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}，则菜单从窗口底部开始:

• 如果我使用的是anchorOrigin={{ horizontal: 'right', vertical: 'top' }}，则菜单从窗口顶部开始，但从用户配置文件图像的中间开始:

对许多人来说，应用getContentAnchorEl={null}解决了这个问题，但对我来说，它不起作用.我正在使用MUI v5.10.0