reactjs - 値を変更した後にReactコンポーネントが更新されない

Question

ReactJS では、ステートレス コンポーネントを作成しています。
不必要な状態を避けることを読んだので、ベストプラクティスです。

このコンポーネントは、入力ボックスに値が含まれているときに機能を実行する入力フィールドを表します。

    export const InputField = (props) => {
      
      const InputFieldContentsChanged = (event) => {
        props.onChange(event.target.value);
      };

      return (
        <div data-component="input-field"
          className={(props.value !== "" ? "value": "")}>
          <input type={props.type} value={props.value} onChange={InputFieldContentsChanged} />
          <span className="bar"></span>
          <label>{props.label}</label>
        </div>
      );
    };

    InputField.PropTypes = {
      type: PropTypes.oneOf([ "text", "password" ]).isRequired,
      label: PropTypes.string.isRequired,
      value: PropTypes.string,
      onChange: PropTypes.func.isRequired
    }

ここで、上記のコンポーネントをテストするためのサンプルである別のコンポーネントを作成しました。これは次のようになります。

    export const SampleComponent = (props) => {
      
      let componentUsername = "";
      
      const onUsernameChanged = (username) => {
        componentUsername = username;
      };
      
      return (
        <InputField type="text" label="Username" value={componentUsername} onChange={onUsernameChanged} />
      );
    };

valueそのため、入力フィールドの内容が変更されたときに変更されるコンポーネントのカスタム変数にバインドしています。

入力フィールド コンポーネントが新しいユーザー名で更新されないのはなぜですか?

敬具、