MUI Select - handling duplicate option in dropdown

I am using MUI v5 and I have two options which have a duplicate name. When I select them using the Select component, both are selected.

How would I handle this in MUI v5?

import * as React from "react";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import ListItemText from "@mui/material/ListItemText";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import Checkbox from "@mui/material/Checkbox";
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250
}
}
};
const namesObj = [
{
id: 1,
name: "Oliver Hansen"
},
{
id: 2,
name: "Van Henry"
},
{
id: 3,
name: "April Tucker"
},
{
id: 4,
name: "April Tucker"
}
];
export default function MultipleSelectCheckmarks() {
const [personName, setPersonName] = React.useState<string[]>([]);
console.log("personName: ", personName);
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}
>
{namesObj.map((name) => (
<MenuItem key={name.id} value={name.name}>
<Checkbox checked={personName.indexOf(name.name) > -1} />
<ListItemText primary={name.name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}

https://codesandbox.io/s/priceless-spence-n79nhd?file=/demo.tsx:0-2005

MUI uses the value property of the MenuItem component to determine which options are selected. If two options have the same value, they will both be selected when one of them is clicked.

One possible solution is to use the id property of the namesObj array as the value of the MenuItem component, instead of the name property. This way, each option will have a unique value that can be used to identify it. For example:

export default function MultipleSelectCheckmarks() {
const [personName, setPersonName] = React.useState<number[]>([]);
console.log("personName: ", personName);
const handleChange = (event: SelectChangeEvent<typeof personName>) => {
const {
target: { value }
} = event;
setPersonName(
typeof value === "string"
? value.split(",").map((item) => Number(item))
: value
);
};
return (
<div>
<FormControl sx={{ m: 1, width: 300 }}>
<InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
<Select
multiple
value={personName}
onChange={handleChange}
input={<OutlinedInput label="Tag" />}
renderValue={(selected) =>
selected
.map((id) => namesObj.find((name) => name.id === id).name)
.join(", ")
}
MenuProps={MenuProps}
>
{namesObj.map((name) => (
<MenuItem key={name.id} value={name.id}>
<Checkbox checked={personName.indexOf(name.id) > -1} />
<ListItemText primary={name.name} />
</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}