Autoselect doesn't replace the old value with the new one if i change the options array (case of language change when selected)

[eran-or]

!!! Just to be clear - this is working solution.

I moved to controlled Component solution because the uncontrolled has the bug.

reproduce

copy this solution and remove the hooks (useState, useEffect, onChange) and all related
Try a model with two different languages
const options1 = [{id:"1", name: "hello"}, {id:"2", name: "world" }]
const options2 = [{id:"1", name: "שלום", {id:"2", name: "עולם"}]
After render Select an option from the list.
Then change the language - use a native select for this
This will inject a different options.
The selected value should be the name from the new options array

/* typescript */
import React, {memo, useEffect, useState} from 'react'
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

interface ComboProps {
placeholder?: string;
options: Option[]
}

type Option = { id: string, name: string }

const Combo: React.FC = ({options}) => {
const [value, setValue] = useState<Option | null>(null)

useEffect(()=>{
const newValue = options.find(o=>o.id === value?.id) || null
setValue(newValue)
}, [options])

return <Autocomplete
options={options}
getOptionLabel={(option) => option?.name}
// getOptionSelected helping to get rid of warning message
getOptionSelected={(option, value)=> option.id === value.id}
value={value}
onChange={(event, newValue) => setValue(newValue)}
style={{ width: 300 }}
renderInput={(params) =>{
  return  <TextField {...params} label="Combo box" variant="outlined" />
}}

/>
}

export default memo(Combo)