如何净化MUI Autocomplete输入？按键输入无法实时过滤无效字符

当前实现 #

在React项目中使用了MUI Autocomplete组件。

需求目标 #

希望对输入内容进行净化，阻止用户输入无意义的字符。

尝试方案 #

创建了一个原生输入框和一个<Autocomplete>组件，为两者都传入了受控值。

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))
          }} />
        )}
      />
    </>
  )
}

遇到的问题 #

原生输入框可以正常工作，说明更新逻辑没有问题。但MUI组件表现异常：输入字母时不会被过滤，只有在输入数字后，字母才会消失。

内容的提问来源于stack exchange，提问作者totymedli