Генерация x-количества компонентов React из целочисленной переменной

Итак, у меня есть веб-страница, которая предназначена для моделирования своего рода анкеты. Каждый вопрос будет занимать всю страницу, а пользователь будет переключаться между вопросами с помощью клавиш со стрелками. Эта часть в порядке, переключение компонентов при нажатии кнопок не кажется проблемой, и я получил доказательство того, что это работает раньше.

Проблема в том, что в этих анкетах не всегда будет одинаковое количество вопросов. Это будет зависеть от выбора человека, составляющего анкету. Поэтому я сохранил количество вопросов в переменной, хранящейся в Django Model, и я получаю эту переменную и пытаюсь сгенерировать х количество компонентов на основе этого целого числа. На данный момент я просто пытаюсь заставить его сгенерировать нужное количество компонентов и позволить мне правильно перемещаться между ними, я буду беспокоиться о наполнении их нужным содержанием позже, потому что у меня уже достаточно проблем с этим. Итак, вот мой код:

import React, { useState, useEffect, cloneElement } from 'react';
import { useParams } from 'react-router-dom'
import QuestionTest from './questiontest';

function showNextStage(displayedTable, questionCount) {
    let newStage = displayedTable + 1;
    if (newStage > questionCount) {
        newStage = questionCount;
    }
    return newStage;
}

function showPreviousStage(displayedTable) {
    let newStage = displayedTable - 1;
    if (newStage < 1) {
        newStage = 1;
    }
    return newStage;
}

export default function Questionnaire(props) {
    const initialState = {
        questionCount: 2,
        is_host: false
    }
    const [ roomData, setRoomData ] = useState(initialState) 
    const { roomCode } = useParams()

    useEffect(() => {
        fetch("/audio/get-room" + "?code=" + roomCode)
          .then(res => res.json())
          .then(data => {
            setRoomData({
              roomData,
              questionCount: data.questionCount,
              isHost: data.isHost,
            })
          })
    },[roomCode,setRoomData])
    const [ displayedTable, setDisplayedTable ] = useState(1);

    let initialComponents = {};
    for (let i = 1; i < roomData.questionCount + 1; i++) {
        initialComponents[i] = <div><p>{i}</p> <QuestionTest /></div>
    } 
    // "<QuestionTest />" is just a random component I made and "{i}" is
    // to see if I'm on the right one as I test.
    const [components] = useState(initialComponents);

    useEffect(() => {
        window.addEventListener('keydown', (e) => {
            if (e.keyCode == '39') {
                setDisplayedTable(showNextStage(displayedTable, roomData.questionCount));
            } else if (e.keyCode == '37') {
                setDisplayedTable(showPreviousStage(displayedTable));
            }
        });

        return () => {
          window.removeEventListener('keydown', (e) => {
            if (e.keyCode == '39') {
                setDisplayedTable(showNextStage(displayedTable, roomData.questionCount));
            } else if (e.keyCode == '37') {
                setDisplayedTable(showPreviousStage(displayedTable));
            }
        });
        };
      }, []);

    return (
        <div>
            {components[displayedTable]}
        </div>
    )
  }

Проблема в том, что мне нужно установить начальное состояние для переменной questionCount, иначе я получаю ошибки. Но это начальное состояние почти сразу же заменяется значением, установленным для данной анкеты, полученным функцией fetch, и таким образом состояние сбрасывается. Однако начальное значение questionCount, равное 2, используется при генерации компонентов и добавлении событийных слушателей, и поэтому, когда страница сгенерирована, она имеет просто два компонента, а не число, соответствующее значению questionCount для анкеты.

Я не совсем понимаю это. Если я удалю window.addEventLister из useEffect и сделаю его отдельным, то он работает и генерируется нужное количество компонентов, но затем он добавляет новый EventListener каждый раз, когда состояние обновляется, что начинает вызывать огромную задержку при переключении между страницами, так как вызовы функций накапливаются все больше и больше.

Итак, я действительно не знаю, как этого добиться. Возможно, весь мой подход к этому с самого начала ужасно неправильный (я просто включил его, чтобы показать, что я сделал попытку, а не просто попросил сделать это за меня), но я не могу найти никаких примеров того, что я пытаюсь сделать, в Интернете, и я на пределе своих сил пытаюсь возиться с этим.

Любая помощь будет очень признательна, и я прошу прощения и с удовольствием разъясню любые неясности в этом сообщении. Спасибо.