Material UI Autocomplete unique id problem - reactjs

Question

i have the same names in my data and I want to use unique id which i have .
However . i can not find right place for "key={id}"
<AutoCompleteComp
data={data}
setInputValue={setInputValue}
inputValue={inputValue}
setCurrentEvent={setCurrentEvent}
goToPage={goToPage}
/>
{currentEvent?.name === inputValue && (
<Box sx={{ width: "100%" }}>
{listArray.map((text, index) => (
<ListItem
// selected
onClick={() => addUrlHandler(index, text)}
button
key={text}
sx={{
"& .MuiListItemText-root": {
color: index === currentIndex ? "#6AE05F" : "",
},
"&:hover": {
backgroundColor: "rgba(36, 82, 32, 0.5)",
},
}}>
<ListItemIcon sx={{ color: "#6AE05F" }}>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText sx={{ color: "white" }} primary={text} />
</ListItem>
))}

Answer 1

It's fine to use index as key when you can't find an id.
This is from the doc:
When you don’t have stable IDs for rendered items, you may use the
item index as a key as a last resort:
<AutoCompleteComp
data={data}
setInputValue={setInputValue}
inputValue={inputValue}
setCurrentEvent={setCurrentEvent}
goToPage={goToPage}
/>
{currentEvent?.name === inputValue && (
<Box sx={{ width: "100%" }}>
{listArray.map((text, index) => (
<ListItem
// selected
onClick={() => addUrlHandler(index, text)}
button
key={index}
sx={{
"& .MuiListItemText-root": {
color: index === currentIndex ? "#6AE05F" : "",
},
"&:hover": {
backgroundColor: "rgba(36, 82, 32, 0.5)",
},
}}>
<ListItemIcon sx={{ color: "#6AE05F" }}>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText sx={{ color: "white" }} primary={text} />
</ListItem>
))}