Multiselect dropdown in react final form inside Modal

Question

I am using multi select dropdown in react final form using material-ui. But when I use it inside Modal, it does not take me to the respective element when I type a letter. This works fine with out a Modal.

const theme = useTheme();
const [personName, setPersonName] = React.useState<string[]>([]);

const handleChange = (event: SelectChangeEvent<typeof personName>) => {
  const {
    target: { value },
  } = event;
  setPersonName(
    // On autofill we get a stringified value.
    typeof value === "string" ? value.split(",") : value
  );
};

return (
  <Modal show={show} onHide={hideModal}>
    <Modal.Header closeButton></Modal.Header>

    <Modal.Body>
      <Form
        onSubmit={OnSubmit}
        render={({ handleSubmit, submitting }) => (
          <form onSubmit={handleSubmit}>
            <div>
              <FormControl sx={{ m: 1, width: 300 }}>
                <InputLabel id="demo-multiple-chip-label">Chip</InputLabel>
                <Select
                  labelId="demo-multiple-chip-label"
                  id="demo-multiple-chip"
                  multiple
                  value={personName}
                  onChange={handleChange}
                  input={
                    <OutlinedInput id="select-multiple-chip" label="Chip" />
                  }
                  renderValue={(selected) => (
                    <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
                      {selected.map((value) => (
                        <Chip key={value} label={value} />
                      ))}
                    </Box>
                  )}
                  MenuProps={MenuProps}
                >
                  {names.map((name) => (
                    <MenuItem
                      key={name}
                      value={name}
                      style={getStyles(name, personName, theme)}
                    >
                      {name}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </div>{" "}
          </form>
        )}
      />
    </Modal.Body>
  </Modal>
);

This code works with normal js but doesnt work when used inside bootstrap modal