Javascript 素材界面如何让自动完成弹出框不受菜单限制

I have an Autocomplete inside of a Menu. Whenever Autocomplete is clicked, the dropdown list/Popper appears but it is restricted within the parents which is the Menu. How do set it so that the dropdown list/Popper of the Autocomplete is not restricted within the Menu (Parents) and can overflow out if there is not enough space? Currently, it looks like this:

But I am hoping that the drop-down list is not restricted within the Menu itself but it can overflow out of it. Here is my code.

import { useState } from "react";
import { Button, Menu, Box,  } from "@mui/material";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";

const FilterMenuWithAutocomplete = () => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  return (
    <>
      <Button
        id="filter-button"
        aria-controls={open ? "basic-menu" : undefined}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        disableRipple
        onClick={handleButtonClick}
      >
        Button
      </Button>
      <Menu
        id="price-filter-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleMenuClose}
        MenuListProps={{
          "aria-labelledby": "price-filter-menu",
        }}
      >
          <Box sx={{ display: "flex", flexDirection: "row", p: 2  }}>
            <Autocomplete
              disablePortal
              id="autocomplete"
              options={option}
              sx={{ width: "200px" }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  InputLabelProps={{ children: null }}
                  placeholder="Placeholder"
                  sx={{
                    '& input': {
                      height: "10px",
                      fontSize: '0.8rem',
                    },
                  }}
                />
              )}
            />
          </Box>
      </Menu>
    </>
  );
};

const option = [
  { label: "500", value: 500 },
  { label: "1000", value: 1000 },
  { label: "1500", value: 1500 },
  { label: "2000", value: 2000 },
  { label: "2500", value: 2500 },
  { label: "3000", value: 3000 },
  { label: "3500", value: 3500 },
  { label: "4000", value: 4000 },
  { label: "4500", value: 4500 },
  { label: "5000", value: 5000 },
  { label: "6000", value: 6000 },
  { label: "6000", value: 6000 },
  { label: "7000", value: 7000 },
  { label: "8000", value: 8000 },
  { label: "9000", value: 9000 },
  { label: "10,000", value: 10000 },
  { label: "12,000", value: 12000 },
  { label: "15,000", value: 15000 },
  { label: "20,000", value: 20000 },
  { label: "30,000", value: 30000 },
  { label: "40,000", value: 40000 },
  { label: "50,000", value: 50000 },
];

export default FilterMenuWithAutocomplete;

我try 创建具有最高zIndex的弹出窗口，如下所示

const PopperMy = function (props) {
  return (<Popper {...props} style={{ width: 250, zIndex: 999999 }} placement='bottom-start' />)
}
<Autocomplete PopperComponent={PopperMy}>

还试图将PopperComponent锚定到菜单上，但后来根本看不到.我希望结果是这样的

以下是Codesandbox链接: https://codesandbox.io/p/sandbox/autocompletemenu-fnfs63?file=%2Fsrc%2FApp.tsx个