Error: "undefined is not an object" in react native

I have a React native function Quiz with them where I make a fetch GET request. I have a check if the data has loaded with the showQuestion variable. But somehow it, when the data has loaded the app, returns this error message:

undefined is not an object (evaluating'questObj[currentQuestion].questionText')

I tried to print the data questObj[currentQuestion] and that gives me an alert with the object which is filled with data.

  alert(JSON.stringify(questObj[currentQuestion]));

Any suggestions on what I could be doing wrong? (I'm new to React native so it could probably be something I'm doing completely wrong.)

export function Quiz(this: any) {  const styles = StyleSheet.create({    container: {      backgroundColor: '#B86566',      width: '100%',      height: '100%',      alignItems: 'center',      justifyContent: 'center'    },    headingColumn: {      flexBasis: '90%',      display: 'flex',      flexDirection: 'column',      alignItems: 'center',      flex: 1,      padding: 20,      fontSize: 30,    },    buttonColumn: {      flexBasis: '35%',      display: 'flex',      flexDirection: 'column',      alignItems: 'center',      flex: 1,      padding: 20,      margin: 20,      borderColor: 'white',      borderWidth: 1    },    row: {      display: 'flex',      flexDirection: 'row',      flexWrap: 'wrap',      width: '100%'    },  });  const [showScore, setShowScore] = useState(false);  const [showQuestion, setShowQuestion] = useState(false);  const [currentQuestion, setCurrentQuestion] = useState(0);  const [score, setScore] = useState(0);  const [questionArray, setQuestions] = useState(0);  useEffect(() => {    getQuestions();  }, []);  let questObj: {    questionText: any;    answerOptions: any;  }[] = [];  const getQuestions = async () => {    try {      let response = await fetch('https://opentdb.com/api.php?amount=10&category=26&difficulty=medium&type=multiple'      );      let json = await response.json();      json.results.forEach((element: { question: any; correct_answer: any; incorrect_answers: any; }) => {        questObj.push({          questionText: element.question,          answerOptions: [{ answerText: element.correct_answer, isCorrect: true },          { answerText: element.incorrect_answers[0], isCorrect: false },          { answerText: element.incorrect_answers[1], isCorrect: false },          { answerText: element.incorrect_answers[2], isCorrect: false }          ],        },        );        alert(JSON.stringify(questObj[currentQuestion]));        setShowQuestion(true);      });    } catch (error) {      console.error(error);    }  }  const handleAnswerButtonClick = (isCorrect: boolean) => {    if (isCorrect) {      setScore(score + 1);    }    const nextQuestion = currentQuestion + 1;    if (nextQuestion < questObj.length) {      setCurrentQuestion(nextQuestion);    } else {      setShowScore(true);    }  };  return <View style={styles.container}><View><Text></Text></View><View>{showScore ?<Text>You scored {score} out of {questObj.length}</Text>      : <></>}</View>    {showQuestion ?<View><View ><Text>Question {currentQuestion + 1}/{questObj.length} </Text></View><View style={styles.row}><Text style={Object.assign(styles.headingColumn)}>{questObj[currentQuestion].questionText}</Text></View><View style={styles.row}>          {questObj[currentQuestion].answerOptions.map((answerOption: { answerText: string; isCorrect: boolean; }, index: any) => (<Text style={Object.assign(styles.buttonColumn)}><Button                title={answerOption.answerText}                onPress={() => handleAnswerButtonClick(answerOption.isCorrect)}                color="#fff"></Button></Text>          ))}</View></View>      : <></>}</View>;}