Error in MaterialUI’s autocomplete menu “Encountered two children with unique keys”, where I could provide a key?

I am using material-ui’s autocomplete for search suggestion. I have implemented some dummy data from json – server.
Now into the autocomplete , I want to render a list of products that exists into my data, but I am facing a problem

when looking on the browser, it says “two children with the same key “productName_(it is one of same product names from my json)” key should be unique”.
But my products have productId field which I made of type<string> and left vacant, because I want to render uuid() as a product Id, but I don’t know where to put the key into autocomplete.

Also, I don’t want to render a mere list of suggested items, rather I want to render some cards with avatar on the left hand side of them. so where should I put .map() method to do so into MUI Autocomplete?

Here’s my code for autocomplete –

import { Autocomplete, TextField, Typography } from "@mui/material";
import { Fragment, useEffect, useState } from "react";
import uuid from "react-uuid";
import agent from "../../../api/agent";
import { Item } from "../../../models/Job";
import { setCloseMenu, setOpenMenu } from "../../menu/menuSlice";
import { useAppDispatch, useAppSelector } from "../../Redux/reduxStore";


interface Props {
    searchTerm? : string;
}

export default function JobSearch ( props : Props ) {
const [ item, setItem ] = useState<item[]>([]);
// using redux
const dispatch = useAppDispatch();
const { status } = useAppSelector ( state => state.menu );

useEffect(() => {
    agent.Product.getAutoCompleteProducts() // endpoint to get list of products
    .then((item) => {setItem(item); console.log(item)})
    .catch((error) => console.log(error))
}, []);


    return (
        <Fragment>
           <Autocomplete
             open = { status.name === "autoCompleteMenu" && status.open }
             onOpen = { () => {
                dispatch(setOpenMenu("autoCompleteMenu"));
            }}
             onClose = { () => dispatch(setCloseMenu("autoCompleteMenu"))}
             options = {item.map((item) => 
               item.name
             )}  // I want options into form of cards with key as uuid() here
             renderInput = {(params) => (
                <TextField { ...params} 
                 variant = {'outlined'} />  )} />
        </Fragment>
    )
}

type file for my Items is –

 export interface Items {
 itemId : string, //uuid() - should be here
 itemName : string,
 itemPrice : number,
 itemDesc : string

}

I want to know 2 things –

  1. How could I map my own custom layout beneath the autocomplete box, Like I want to map the items into the form of cards, long lengthed cards with avatar on left-side.
  2. I want to know where am I making a mistake in not supplying the key = {} prop to the autocomplete, please keep a note that I only waNt to supply uuid as a key prop.
    and uuid() should be inside my itemId = uuid().
    All suggestions are welcome.