React dropdown select: how to have access to more fields than the array displayed?

I have an array of jsons that have the fields ID, name and description. I'd like to make a dropdown selection box that displays both the name and description, and upon clicking on it, will store the associated id to the rawID state. I haven't found a way to do this without displaying the id in the select box and extracting it. However, this doesn't look very clean to the user, since every option in the box will look like this raw1: description1 *id number. Is there a way to directly pass the id into the onClick function?

const form = () => {
   const [allRaws, setAllRaws] = useState([])
   const [rawID, setRawsID] = useState('')
   
   setAllRaws([
    {"ID" : 1, "name" : "raw1", "description" : "description 1"},
    {"ID" : 2, "name" : "raw2", "description" : "description 2"},
    {"ID" : 3, "name" : "raw3", "description" : "description 3"},
   ])

    const handleSelectRaws = (event, value) =>{
        if (value != null){
            const id = value.split("*").pop()
            setRawsID(id)
        }
    }

   return (
       <AutocompleteForm 
                array={allRaws.map((raw) => ([String(raw.name)]+ ": " + String(raw.description) + 
                 "*" + String(raw.id))} 
                label="Pick set of raws" 
                onChange={handleSelectRaws} />}
   )

}

and the autocompleteForm component is defined as such:
It takes as props an array of strings to display, a label which tells the user what to do and a function onChange.

 export default function AutocompleteForm(props) {
   const { label, array, onChange} = props
  
   return (
     <Autocomplete
       disablePortal
       options={array}
       sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label={label}
        />}
        onChange={onChange}
     />
   )
 }

From the Autocomplete documentation, getOptionLabel property is used to determine the string value for a given option.

You can pass the allRaws array to the Autocomplete options without any transformation and use getOptionLabel to specify the option label.

const initialState = [
  {"id" : 1, "name" : "raw1", "description" : "description 1"},
  {"id" : 2, "name" : "raw2", "description" : "description 2"},
  {"id" : 3, "name" : "raw3", "description" : "description 3"}
]

function Form() {
  const [allRaws, setAllRaws] = useState(initialState)
  const [rawID, setRawsID] = useState(null)

  const handleSelectRaws = (event, value) => {
    if (value != null) {
      setRawsID(value.id)
    }
  }

  return (
    <AutocompleteForm 
      array={allRaws} 
      label="Pick set of raws" 
      onChange={handleSelectRaws} 
    />
  )
}

export default function AutocompleteForm(props) {
  const {label, array, onChange} = props

  return (
    <Autocomplete
      disablePortal
      options={array}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label={label}/>}
      onChange={onChange}
      getOptionLabel={(option) => `${option.name}: ${option.description}`} 
    />
  )
}