reactjs - React フックの useState が onSubmit で更新されない

Question

現在、入力フィールドの値を onSubmit 状態にプッシュする際に問題が発生しています。

コードサンドボックス

コンポーネントが更新されたときにその値を使用してユーザーを別のページにリダイレクトできるように、入力フィールドの値を状態に設定しようとしています。パスを手動でテストしたところ動作しましたが、状態が同期的に更新されていないため、リダイレクトは機能しません。ページに入力値をレンダリングすることはできますが、ログに記録しようとすると、長い間 (初めて) 未定義になり、2 回目の送信時に以前の状態になります。

import React, { useRef, useState } from "react";
import { db } from "../firebase";
import { Redirect } from "@reach/router";

function CreateProject(props) {
  const [id, setID] = useState(null);
  const colorRef = useRef(null);
  const projectNameRef = useRef(null);

  const handleSubmit = e => {
    e.preventDefault();
    const project = {
      name: projectNameRef.current.value,
      colors: [colorRef.current.value],
      colorName: colorNameRef.current.value,
      createdAt: new Date()
    };
    setID(projectNameRef.current.value);

    db.collection("users")
      .doc(`${props.user}`)
      .collection("projects")
      .doc(`${projectNameRef.current.value}`)
      .set({ ...project });
    e.target.reset();
  };


  return id ? (
    <Redirect from="/projects/new" to={`projects/:${id}`} noThrow />
  ) : (
    <div>
      <div>
        <h1>Create new selection</h1>
        <form onSubmit={handleSubmit}>
          <label>Color</label>
          <input ref={colorNameRef} type="text" name="colorName" />
          <label>Project Name</label>
          <input ref={projectNameRef} type="text" name="projectName" required />
          <button type="submit">Submit</button>
        </form>
      </div>
    </div>
  );
}

export default CreateProject;

反応: 16.8.6