React TextFieldを削除ボタンで空白にする方法

はじめに

ReactでMaterial-uiのTextFieldを使って、削除ボタンで入力した内容を消す方法を紹介します。
全然難しいことじゃなさそうですが、ちょっとだけハマってしまったので。
ちなみにすごく簡単です。

最初はこうしてた

App.js

import { useState } from 'react'
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';


function App() {

  const [text, setText] = useState('');

  const DeleteHandler = () => {
    setText('')
  }

  console.log(text);

  return (
    <div>
      <TextField
        id="text"
        label="text"
        onChange={(e) => {
          setText(e.target.value)
        }}
      />
      <Button
        variant="contained"
        onClick={DeleteHandler}
      >
        Delete
      </Button>
    </div>
  );
}

export default App;

DeleteHandlerでtextを空にしてるはずなのに。
console.log(text)で見てみると確かに値は空なのに、画面のTextFieldの文字は消えてくれない、、、

こうしたら上手くいった

App.js

      <TextField
        id="text"
        label="text"
        value={text}
        onChange={(e) => {
          setText(e.target.value)
        }}
      />

value={text}の一文を加えるだけ。
valueを指定してあげないといけなかったんですかね。

終わりに

見た感じ上手くいったのはいいものの、何でこうなるのかちゃんとした理由をちゃんと学びたい。