I have added checkboxes to the MenuItems in the TextField of type Select. When I select one of the MenuItems, the checkbox is also displaying in the input of the TextField.

Req: I need to stop displaying the check box in the input of TextField. I need to strictly use the TextField with Selcet attribute.

Can someone please help me with this? Thnak you.

sandbox link: https://codesandbox.io/s/basicselect-material-demo-forked-06gns?file=/demo.js

code:

import * as React from "react";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox";
import TextField from "@mui/material/TextField";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250
     }
  }
};

const names = ["Oliver Hansen", "Van Henry"];

export default function MultipleSelectCheckmarks() {
  const [personName, setPersonName] = React.useState([]);

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

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <TextField
          // multiple
          select
          value={personName}
          onChange={handleChange}
          renderValue={(selected) => selected.join(", ")}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem key={name} value={name}>
              <Checkbox checked={personName.indexOf(name) > -1} />
              <ListItemText primary={name} />
            </MenuItem>
          ))}
        </TextField>
      </FormControl>
    </div>
  );
}