MUI Menu Dropdown opens left of page, not under of button

I use Material UI 5 and I have a problem when I click Avatar, the dropdown opens left of the page. It must open under the avatar button. I don't know what is my mistake. And I am newer in MUI

Component

  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (

        <Stack direction="row" alignItems="center" spacing={{ xs: 0.5, sm: 1.5 }} sx={{ color: "black" }}>
          <Button
            onClick={handleClick}
            endIcon={<KeyboardArrowDownIcon />}
            id="basic-button"
            aria-controls={open ? "basic-menu" : undefined}
            aria-haspopup="true"
            aria-expanded={open ? "true" : undefined}
            sx={{ color: "black" }}
          >
            <IconButton sx={{ border: `1px solid ${theme.palette.primary.neutral400}`, borderRadius: "16px", marginRight: "8px" }}>
              <Avatar alt="Profile" src={ProfilePicture} />
            </IconButton>{" "}
          </Button>
          <Menu
            id="basic-menu"
            anchorEl={anchorEl}
            open={open}
            onClose={handleClose}
            MenuListProps={{
              "aria-labelledby": "basic-button",
            }}
          >
            <MenuItem onClick={handleClose}>Profile</MenuItem>
            <MenuItem onClick={handleClose}>My account</MenuItem>
            <MenuItem onClick={handleClose}>Logout</MenuItem>
          </Menu>
 
        </Stack>