make a function to advance to next question

[tangway]

started by writing a simple function to be attached to the Next button and as I went through iterations of it i added States and most importantly figured that I can use State to manage the index number of the questions array as currentQuestionNumber, given that for the moment we will advance to the next question by just adding +1 to the index. this replaces all the hardcoded [0] i had placed in App and because of that FlagComponent will also dynamically re-render when we click on Next

const [currentQuestionNumber, setCurrentQuestionNumber] = useState(0);
const [correctAnswer, setCorrectAnswer] = useState(
    questions[currentQuestionNumber].answer,
  );

const FlagComponent = AnimatedComponent(
    mapOfFlags[questions[currentQuestionNumber].answer],
  );

const nextButtonFunc = () => {
    if (currentQuestionNumber === questions.length - 1) {
      console.log('THE END');
    } else {
      setCorrect(null);
      setSelectionMade(false);
      setStartAnimation(false);
      setCurrentQuestionNumber(currentQuestionNumber + 1);
      setCorrectAnswer(questions[currentQuestionNumber + 1].answer);
    }
  };