Object array can't add items on React chips from material-ui - reactjs

Question

I'm with a little issue here right now with Material-UI chips component. I have a select with a list of users. When you select a user, a chip with his number appears right below the form. Everything works just fine but the chips are overwriting, not adding the new ones. Here my code:
import React from 'react';
import Chip from '#material-ui/core/Chip';
export default function Test(){
const [chipData, setChipData] = React.useState([]);
const userArray = [
{key: 1, label: name1},
{kel: 2, label: name2}
];
const [userValue, setUserValue] = React.useState('');
// This come from the select form onChange
const handleSelect = (e) => {
setUserValue(e.target.value);
setChipData([...chipData, {key: e.target.value, label: e.target.value}]);
}
const handleDelete = chipToDelete => () => {
setChipData(chips => chips.filter(chips => chips.key !== chipToDelete.key));
}
return(
<div>
<TextField
select
value={userValue}
onChange={e => handleSelect(e)}
>
{userArray.map(option => (
<MenuItem key={option.key} value={option.label}>
{option.label}
</MenuItem>
))}
</TextField>
{chipData.map(data => {
return(
<Chip
key={data.key}
label={data.label}
onDelete={handleDelete(data)}
/>
);
})}
</div>
);
}
I tried with something like chipData.push({data...}) that works just fine, but do not allow me to add more items if I delete any of them. With the code above the chips are just overwriting the one clicked before and do not add to the array.

Answer 1

Online Example, please validate if you have the issue:
https://codesandbox.io/s/material-ui-n7kbp
only edited key render values:
{chipData.map((data, index) => {
return (
<Chip
key={data.key + index}
label={data.label}
onDelete={handleDelete(data)}
/>
);
})}