显示第一个数组元素 - ReactJS

我正在使用 React / Typescript 开发一个测验应用程序以进行学习。

我有一个叫做测验的状态，它包括：

interface QuestionData {
  id: number;
  question: string;
  explanation: string;
  options: OptionsData;
}

我只想在屏幕上显示数组的第一个元素，我知道这样做的方法是：

<p>{quiz[0].question}</p>

但是，通过这种方式，我收到以下错误：

TypeError: Cannot read property 'question' of undefined

如果我使用 console.log 打印(quiz[0].question)，我会得到想要的回报。有没有其他办法？或者我认为正确的形式不是吗？

完整代码如下：

interface VideoInfo {
  video_id: number;
}

type OptionsData = any[];

interface QuestionData {
  id: number;
  question: string;
  explanation: string;
  options: OptionsData;
}

const Quiz: React.FC<VideoInfo> = video_id => {
  const [quiz, setQuiz] = useState<QuestionData[]>([]);

  const video = video_id;

  const getQuiz = useCallback(async () => {
    try {
      await api.get(`/quiz/video/${video}`).then(response => {
        setQuiz(response.data);
      });
    } catch (err) {
      alert('error');
    }
  }, [video]);

  useEffect(() => {
    getQuiz();
  }, [getQuiz]);

  return (
    <Container>
      <ol>
        <li>
          <div className="question">
            {/* The error happens here: */}
            <p>{quiz[0].question}</p>
            <div>
              <Button type="button">A</Button>
              <Button type="button">B</Button>
              <Button type="button">C</Button>
              <Button type="button">D</Button>
            </div>
          </div>
        </li>
      </ol>
    </Container>
  );
};

export default Quiz;