MUI AutoComplete selected value to return the related object

I have implemented a list with MUI (v4) Select component.
Now I have a new feature request, that this list will be searchable, since it's a very long list.

Seems like my options inside MUI lib is only AutoComplete component.

first question - is there an option to do that with the Select component?

I'm trying to create implementation with AutoComplete, but reaching a spot where I'm not sure how to proceed.
While in Select component, when selecting an item from the list, I also get the object that the value came from,
AutoComplete component only return the flat value selected, meaning the simple string. I can't find a way to get the object related to it.

So my second qurestion - Does this makes sense? How do I get the whole object related to the value selected, same as in Select component.

example of my implementation:

options = [
{ id:"value1", optionName: "aaa", moreData2: "bbb" }
{ id: "value2", optionName: "ccc", moreData2: "ddd" }
]

With Select:

<Select
                id={"options"}
                name={"options"}
                value={JSON.stringify(chosenOption) || ""}
                onChange={onSelect}
            >
                <MenuItem key={"options_empty"} value={""}>
                    None
                </MenuItem>
                {options.map((option: OptionDto) => (
                    <MenuItem key={option.id} id={option.optionName} value={JSON.stringify(option)}>
                        {option.optionName}
                    </MenuItem>
                ))}
            </Select>


With AutoComplete:

<Autocomplete
                id={"options"}
                renderInput={(params: any) => <TextField {...params} />}
                options={options}
                getOptionLabel={(option: OptionDto) => option.optionName!}
                onChange={onSelectOption}
            />

You can use component Autocomplete for doing this.
You can pass an array of object that contain a label attribute an whatever you want, and you can save the value selected ( thanks onChange ) into state, with all attribute.
Default value visible is label, but you can change it with add this attribute:

getOptionLabel=	{(option) => option.code}

I post for you an example complete:

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

const options = [{label:'Option 1', code:"bb"}, {label:'Option 2', code:"aa"}];

export default function ControllableStates() {
  const [value, setValue] = React.useState<any| null>(options[0]);

  return (
    <div>
      <div>{`value: ${value !== null ? `'${JSON.stringify(value)}'` : 'null'}`}</div>
      <br />
      <Autocomplete
        value={value}
        onChange={(event: any, newValue: string | null) => {
          setValue(newValue);
        }}
        id="demo"
        options={options}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="demo" />}
      />
    </div>
  );
}

You can use Autocomplete component and it passes the value.

let's say you have a list of countries like this:

countries=[
    {id:1, name:'United States' iso3: 'USA'}
    {id:2, name:'France'        iso3: 'FRA'}
    {id:3, name:'Germany'       iso3: 'DEU'}
]

<Autocomplete
  disablePortal
  size="small"
  name="country"
  id="country"
  options={countries}
  onChange={handleCountryChange}
  renderOption={(props, option) => ( 
    <Box
      component={"li"}
      {...props}
    >
      {option.label}
    </Box>
    )}
    renderInput={(params) => (
      <TextField
          {...params}
          label="Country"
          autoComplete="new-password"
      />
  )}
/>

now you can get the value of the selected option like this.

const handleCountryChange = (event, value) => {
    console.log(value); // output {id:1, name:'United States' iso3: 'USA'}