value を <input> に設定する理由は、「画面上の表示」と「Reactが持っているデータ（状態：State）」を完全に一致させるためです。
通常のHTML（JavaScriptを使わない世界）では、入力欄に文字を打ち込むと、ブラウザが自動的にその文字を画面に表示します。しかし、Reactでは「画面の表示」と「Reactが持っているデータ（State）」を完全に一致させたいというルールがあります。
Reactの世界では、これを「制御コンポーネント（Controlled Component）」と呼びます。
value を設定する意味
1. ReactのStateが「唯一の正しいデータ源」になる
value={amount} と書くことで、「この入力欄の中身は、常に amount というStateの値そのものですよ」と強制することができます。
入力欄の表示の主導権を、ブラウザからReact側へと奪い取るイメージです。
2. 「データの変更」と「画面の更新」が連動する
コード内にある以下のセットで、双方向の連動が完成します。
// ① Stateの値を画面に映す
value={amount}
// ② キーボード入力されたらStateを更新する
onChange={(e) => setAmount(e.target.value)}
- あなたが「1」とキーボードで叩く。
-
onChangeが発火し、setAmount("1")が実行されてStateが変わる。 - Stateが変わったのでReactが再描画（リレンダリング）され、
value={amount}（つまり1）が画面に表示される。
この一連の流れが超高速で行われています。
もし value を設定しなかったらどうなる？
<input
type="number"
onChange={(e) => setAmount(e.target.value)}
/>
これでも一見、キーボードで入力した文字が画面に見えるし、onChange でStateに値は保存されます。しかし、「画面の表示」と「Reactのデータ」がバラバラの独立した状態になってしまいます。
これによって、以下のような実務でよくある実装ができなくなります。
できないこと例①：送信した後に、入力欄を空っぽ（リセット）にできない
送金ボタンを押した後に入力欄を「0」や「空っぽ」に戻したいとき、value がないと、React側から画面を操作できません。
const handleSubmit = async (e) => {
e.preventDefault();
await fetch(...);
setAmount('');
// value={amount} があれば画面も空になるが、無いと画面は数字が残ったままになる
};
できないこと例②：初期値を外から入れられない
「前回保存した金額」や「URLのパラメータから取得した金額」を、ページを開いた瞬間に最初から入力欄に入れておきたい（初期値の設定）と思っても、value が紐づいていないと画面に反映されません。
📌 まとめ
-
valueを設定しない場合： 入力欄はブラウザが勝手に管理している（Reactはそれを横から覗き見ているだけ）。 -
valueを設定する場合： 入力欄はReactが100%管理している（データの変更、リセット、初期化が自由自在）。
実務のReact開発では、フォームの値を送信したりクリアしたりする制御が必須になるため、特別な理由がない限りは必ず value と onChange をセットで設定します。