reactのstateを更新した時にvalueを書き換え、かつinput要素を自由に書き換えられるようにしたい。

Question

reactのstateをmaterial-ui（TextField）のvalueに渡しTextFieldの値を変更し、かつ手打ちでも変更できるようにしたいのですがうまくいきません。
TextField value={state名}とするとstateが変更された時に表示も変わるのですが、そうすると手打ちでTextFieldに入力することができません。
TextField defaultValue={state名}とすると手打ちで変更できるのですが、今度はstateを変更しても表示が変わりません。
これらの両方（stateを更新した時にvalueを書き換え、かつinput要素を自由に書き換えられるよう）を実現するにはどのようにしたらよろしいでしょうか？

イメージとしては以下です。

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

const change = () => {
    setValue(value + 1)
}

// これだと表示は変わるが、inputに直接書き込めない
return <TextField value={value} onChange={change}/>;

// これだとstateが変わっても表示が変わらないがinputには書き込める
return <TextField defaultValue={value} onChange={change}/>;

Answer 1

onChangeイベントを拾って、そこでstateを変更するようにしてください。

Comments

[maisumakun]

それとも、「stateと違う値を入力された状態」も発生させられるように動かしたい、ということでしょうか？

[hello_space]

質問に追記しました。
①例えば別でstateを変更するためのボタンを作成し、それをクリックした時にsetStateして書き換わったstateをinputのvalueとして持つこと
②inputとして使用するために手打ちしてもinputの中のvalueが変更できること
上記2点を実現したいです。
現状value={state}を使うとinputに入力ができず、defaultValue={state}だとstateを変更しても書き変わりません。

[maisumakun]

元の回答のとおりです。「inputの変更時にstateを変更する」ようにすることで、②を①にまとめてしまいます。

[maisumakun]

（それはやりたくない、何らかの理由があるのでしょうか？）

[maisumakun]

追記を確認しました。

onChangeで固定値を流しているのはなぜですか？

[hello_space]

固定値に意味はありませんでしたので質問の内容を変更いたしました。
<TextField value={state}>とするとinputがstateで固定されてしまい変更できないということはありませんでしょうか？
イベントを拾うというのはsetState(e.target.value)のような形あっていますでしょうか？

[hello_space]

おっしゃっていただいたようにonChangeでstateを変えることで実現できました。
途中コードの複雑さから勘違いをしてしまい、違うところをいじっていてうまくいきませんでした。
解決しほっとしています。ありがとうございました！