[material-ui][Autocomplete] Typing first letter of the label inside a menu closes it about material-ui HOT 4 CLOSED

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

import "./styles.css";
import { Typography } from "@mui/material";

export default function App() {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div className="App">
      <Box p={1} width={500}>
        <Typography>This one works fine</Typography>
        <Autocomplete
          id="autocomplete-demo"
          options={[
            { label: "Option 1", value: 1 },
            { label: "Moption 2", value: 2 },
            { label: "TOption 3", value: 3 },
            { label: "SOption 4", value: 4 },
            { label: "KOption 5", value: 5 },
            { label: "ROption 6", value: 6 },
            { label: "LOption 7", value: 7 },
            { label: "NOption 8", value: 8 },
            { label: "ZOption 9", value: 9 },
          ]}
          multiple
          renderInput={(params) => (
            <TextField
              {...params}
              label="Multiple values"
              placeholder="Favorites"
            />
          )}
        />
      </Box>
      <Box p={1} mt={2}>
        <Typography>
          Open the dropdown and if you type <strong>m</strong> as the first
          letter, it will close the autocomplete, because it is the first letter
          of the label (Multiple values)
        </Typography>
        <Button onClick={handleOpen}>Open Dropdoewn</Button>
        <Popover
          open={open}
          anchorEl={anchorEl}
          onClose={handleClose}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left",
          }}
        >
          <Box padding={1} width={500}>
            <Autocomplete
              id="autocomplete-demo1"
              options={[
                { label: "Option 1", value: 1 },
                { label: "Moption 2", value: 2 },
                { label: "TOption 3", value: 3 },
                { label: "SOption 4", value: 4 },
                { label: "KOption 5", value: 5 },
                { label: "ROption 6", value: 6 },
                { label: "LOption 7", value: 7 },
                { label: "NOption 8", value: 8 },
                { label: "ZOption 9", value: 9 },
              ]}
              multiple
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Multiple values"
                  placeholder="Favorites"
                />
              )}
            />
          </Box>
        </Popover>
      </Box>
    </div>
  );
}