I have below state -

const[values,setValues]=useState<IValue[]>([]);

const[value,setValue]=useState<IValue|null>();

<Autocomplete
 options={values}
 value={value}
 id="value_id"
 getOptionLabel={(option:IValue)=>`(${option.Id}) ${option.Name}`}
 renderInput={(param)=> <TextField {...param}/>}
/>

export interface IValue
{
 Id:string;
 Name : string;
}

useEffect(()=>{
//api call

setValues([...res.data]);
},[])

Autocomplete takes the value from Api call and sets the list. I want to add "All" before the autocomplete list , default selected.

I tried with -

const[value,setValue]=useState<IValue|null>({Id="",Name="All"});

By this way , All appears in the list , but after making any other selection from list , it disappears.