MUI Select Multiple Checkboxes - close on select but not checkbox click

Question

I have a MUI (v5) Select with multiple items and using checkboxes as described in this example:

MUI: https://mui.com/components/selects/#checkmarks

Demo code: https://codesandbox.io/s/tostd?file=/demo.tsx

export default function MultipleSelectCheckmarks() {
  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 (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          id="demo-multiple-checkbox"
          multiple
          value={personName}
          onChange={handleChange}
          input={<OutlinedInput label="Tag" />}
          renderValue={(selected) => selected.join(', ')}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem key={name} value={name}>
              <Checkbox checked={personName.indexOf(name) > -1} />
              <ListItemText primary={name} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

To improve usability, I would like the Select to remain open when the user clicks on the checkboxes. Clicking anywhere else in the menu item will simply select/deselect the item and close the Select component.

Any ideas how to implement? I have tried useRef or with the open but can't get it to work. Thanks!