Why is my function called four times and the random function is not working?

This screen is for multiplication exercise, multiplication is given and you have to put the answer in the textinput and click ok. But the problem is that the multiplication is not display and also functions are call many time for no reason.

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Pressable, TextInput } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import styles from '../Components/AppStyle';
import {LittleSpace05,LittleSpace1, LittleSpace4} from '../Components/LittleSpace';
import changeSize from '../Components/ChangeSize';

function RouletteExercice1 ({ route, navigation }){

  const { multiplyArray, multBy} = route.params;

  const [adaptTitleFontSize, setAdaptTitleFontSize] = useState({
    fontSize: 16,
  });
  const [adaptButtonFontSize, setAdaptButtonFontSize] = useState({
    fontSize: 16,
  });

  const getSize = (event, divide, thing) => {
    if (thing == 'title') {
      setAdaptTitleFontSize(changeSize(event.nativeEvent.layout, divide))
    } else {
      setAdaptButtonFontSize(changeSize(event.nativeEvent.layout, divide))
    }

   };

   const [questionsArray,setQuestionsArray] = useState([]);
   const [answersArray,setAnswersArray] = useState([]);
   const [mQuestion,setMQuestion] = useState();
   const [qaIndex,setQAIndex] = useState(0);
   const [textInputAnswer, setTextInputAnswer] = useState();
   const [questionsNotCreated, setQuestionsNotCreated] = useState(true);
   const [questionAnswered, setQuestionAnswered] = useState(true);

  useEffect(() => {
    createQuestionsArray();
  });

   function createQuestionsArray() {
     if (questionsNotCreated) {
       let m = 0;
       while (m < multiplyArray.length) {
         let b = 1;
         while (b < multBy+1) {
           let quest = multiplyArray[m]+'x'+b;
           let rep = multiplyArray[m]*b;
           setQuestionsArray((prev) => [...prev, quest]);
           setAnswersArray((prev) => [...prev, rep]);
           b++
         }
        m++
       }
       setQuestionsNotCreated(false);
       askQuestion();
     }
   }

   function askQuestion(){
     if (questionAnswered) {
       setMQuestion(questionsArray[Math.floor(Math.random()*questionsArray.length)]);
       setQuestionAnswered(!questionAnswered);

     }
   }

   function compareQA(){
     setQAIndex(questionsArray.indexOf(mQuestion));
     if (answersArray[qaIndex]==textInputAnswer) {
       questionsArray.splice(qaIndex,1);
       answersArray.splice(qaIndex,1);
       console.log(qaIndex);
       setQuestionAnswered(!questionAnswered);
       askQuestion();
     }
   }

  return(
    <View  style=>
      <StatusBar style="auto" />
      <View style=>
      </View>
      <View style=>
        <LittleSpace1/>
        <LittleSpace1/>
        <View onLayout={(event) => {getSize(event,2,'title')}} style={[styles.setViewRE1, {alignItems: 'center'}]}>
          <Text style={[styles.textExercice, adaptTitleFontSize,{fontWeight: 'bold'}]}>{mQuestion}</Text>
        </View>
        <LittleSpace05/>
        <View  style={[styles.setViewRE1, {alignItems: 'center'}]}>
          <Text style={[styles.textExercice, adaptTitleFontSize,{fontWeight: 'bold'}]}>=</Text>
        </View>
        <LittleSpace05 />
        <View onLayout={(event) => {getSize(event, 3,'button')}} style={styles.setViewRE1}>
          <LittleSpace4/>
          <TextInput
            onChangeText={text => setTextInputAnswer(text.replace(/[^0-9]/g, ''))}
            value={textInputAnswer}
            placeholder=" perso"
            textAlign={'center'}
            keyboardType="numeric"
            style={[ styles.inputRE1, adaptButtonFontSize]}
            type='number'
          />
          <LittleSpace1/>
          <Pressable style={styles.buttonRE1} onPress={() => {compareQA();}} >
            <Text style={[styles.textExercice, adaptButtonFontSize]}>OK</Text>
          </Pressable>
          <LittleSpace1/>
        </View>
        <LittleSpace1/>
        <LittleSpace1/>
        <LittleSpace4/>
      </View>
      <View style=>
      </View>
    </View>
  )

}

export default RouletteExercice1;

multiplayArray = [35,17] multby = 5

the function createQuestionsArray create a liste of multiplication [35x1,35x2,35x3,35x4,35x5,17x1,17x2,17x3,17x4,17x5]. this fuction is supposed to be called one time but it is called four time that's why there is questionsNotCreated.

The function askQuestion is supposed to take a random multiplication from the list questionsArray but this is not working.

So, can someone tell me what is wrong in my code? please