执行撤消/重做时，受控的反应输入破坏了 chrome 中的 maxLength 属性

问：

我构建了一个文本字段，它使用接受 5 个字符的 maxLength 的 react 将提供的输入转换为大写。

问题： 当我尝试执行撤消和重做操作时，文本字段允许的字符数超过maxLength HTML属性中指定的字符数。

重现步骤：

1. 转到链接： https://codesandbox.io/s/textfield-uppercase-material-ui-forked-95ww4t?file=/src/App.js
2. 它有一个文本输入，可将给定的文本转换为大写，并且最多允许 5 个字符
3. 键入“abcdef”。由于最大长度限制，您可以在文本字段中看到“ABCDE”
4. 按“ctrl+z”5次
5. 按“ctrl+y”重做
6. 现在，您可以在文本框“ABCDEAA”中看到 7 个字符，根据 maxLength 规范，这些字符不应被允许。

我在chrome和edge浏览器（基于Chromium的浏览器）中遇到了这个问题，但在firefox中没有。我在这里做错了什么，还是需要通过 Chrome 或 React 修复问题。

法典：

export default function App() {


const [value, setValue] = useState("");

  const onValueChange = (e) => {
    setValue(e.target.value.toUpperCase());
  };

  return (
    <div className="App">
      <h1>Text Field uppercase</h1>
      <input
        type="text"
        id="input"
        value={value}
        maxLength="5"
        onChange={onValueChange}
      />
    </div>
  );
}