react hooks: stateをうまく更新できない

前提

react×TSでクイズアプリを作っています。
ランダムでクイズを選択肢、それをクイズリストに追加していきたいのですが、上手く追加できずに困っています。

実現したいこと

25行目のsetQuizListが動作し、quizListにクイズが追加されるようにしたい。

該当のソースコード

point
1  const [quizList, setQuizList] = useState<Quiz[]>([]);
2  const setQuizeez = () => {
3    const max = quizzes.length;
4    console.log(quizList);
5    for (let i = 0; i < questinoNum; i++) {
6      console.log(quizzes[randomNumber(max)]);
7      setQuizList([...quizList, quizzes[randomNumber(max)]]);
8    }
9    console.log(quizList);
10  };
11
12  useEffect(() => {
13    console.log(quizList);
14    setQuizeez();
15    setQuestion(quizList[quizProgress - 1]["question"]);
16    setAnswer(quizList[quizProgress - 1]["answer"]);
17  }, []);
18
19

all
1import React, { ChangeEvent, useEffect, useState } from "react";
2import { quizzes, Quiz } from "../data/quizzes";
3
4export type GameSceneProps = {
5  setScene: (scene: string) => void;
6};
7
8export const GameScene: React.FC<GameSceneProps> = ({ setScene }) => {
9  const [quizProgress, setQuizProgress] = useState<number>(1);
10  const [inputAnswer, setInputAnswer] = useState<string>("");
11  const [inputCheck, setinputCheck] = useState<string>("");
12  const [question, setQuestion] = useState<string>("");
13  const [answer, setAnswer] = useState<string>("");
14  const questinoNum = 3;
15  const [quizList, setQuizList] = useState<Quiz[]>([]);
16
17  const randomNumber = (max: number) => {
18    return Math.floor(Math.random() * max);
19  };
20
21  const setQuizeez = () => {
22    const max = quizzes.length;
23    console.log(quizList);
24    for (let i = 0; i < questinoNum; i++) {
25      console.log(quizzes[randomNumber(max)]);
26      setQuizList([...quizList, quizzes[randomNumber(max)]]);
27    }
28    console.log(quizList);
29  };
30
31  const onchangeText = (e: ChangeEvent<HTMLInputElement>) => {
32    setInputAnswer(e.target.value);
33  };
34
35  const submitAnswer = () => {
36    console.log(inputAnswer);
37    console.log(answer);
38    if (inputAnswer == answer) {
39      setQuizProgress((count) => count + 1);
40      setinputCheck("");
41      console.log(quizProgress);
42      console.log(quizList);
43      setQuestion(quizList[quizProgress - 1]["question"]);
44      setAnswer(quizList[quizProgress - 1]["answer"]);
45    } else {
46      setinputCheck("違うよ！");
47    }
48    setInputAnswer("");
49  };
50
51  useEffect(() => {
52    console.log(quizList);
53    setQuizeez();
54    setQuestion(quizList[quizProgress - 1]["question"]);
55    setAnswer(quizList[quizProgress - 1]["answer"]);
56  }, []);
57
58  useEffect(() => {
59    if (quizProgress === 4) {
60      setScene("result");
61    }
62  }, [quizProgress]);
63

試したこと

console.logを確認したところ、quizzes[randomNumber(max)]は正常に取得されており、setQuizList()前後ともに、空配列であることから、setQuizList()が動作していないと考える。

  const setQuizeez = () => {
    const max = quizzes.length;
    console.log(quizList);
    for (let i = 0; i < questinoNum; i++) {
      console.log(quizzes[randomNumber(max)]);
      setQuizList([...quizList, quizzes[randomNumber(max)]]);
    }
    console.log(quizList);
  };