Reactでフォームのハンドリングをしたい

Question

コード

  const [id, setId] = useState('');
  const handleIdForm = (
    event: React.ChangeEvent<HTMLInputElement>,
  ): void => {
    setId(event.target.value);
  };

  const IdForm: FC = () => (
    <>
      <form onSubmit={postID}>
        <Input label="id" type="text" onChange={handleIdForm} />
      </form>
    </>
  );

Reactでフォームのハンドリングをしたいです.

このようなコードなのですが, 一文字入力するとそれは表示されて二文字目を入力すると一文字目が消えて二文字目も入力されません.

何が悪いのか教えていただけたら嬉しいです.

Comments

[hoshi-takanori]

useState が関数コンポーネントの外で使われてるように見えますが…。
あと、Input が @material-ui/core/Input のことなら、label 属性はありません。代わりに value={id} とすれば良いのでは。

[butsuli_shine]

書き忘れていましたが全体がひとつの大きなコンポーネントに属しています。valueでやって見ます