How to sanitize MUI autocomplete input? It doesn't update on keypress

What I have

I have a MUI Autocomplete component inside React.

Goal

I would like to sanitize the input typed into it so the user can't enter characters that wouldn't make sense anyway.

What I tried

I created a native and an <Autocomplete> input too. I passed the controlled value for both the element and the input under it.

const Form = () => {  const sanitize = value => value.replace(/[^0-9:]/g, '')  const [value, setValue] = useState('')  return (<><input type="text" value={value} onChange={(e) => { setValue(sanitize(e.target.value)) }} /><Autocomplete        options={['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']}        value={value}        inputValue={value}        onChange={(_, value) => { setValue(sanitize(value || '')) }}        freeSolo        renderInput={(params) => (<TextField {...params} label="Value" value={value} onChange={(e) => {            setValue(sanitize(e.target.value))          }} />        )}      /></>  )}

Problem

The native one works, so it isn't the update logic messing up things. The MUI one is acting weird: typing in letters doesn't get filtered out, but when I type a number after them the letters disappear.