I'm trying to create a quiz app with ReactJS. I want to collect and edit answers into an array. Object index gonna be question number.

I can display answers with radio button:

<Radio onClick={() => handleAdd(questionnumber, answer)} label="Fo Answer" />

That's my array and function:

 const [answers, setAnswers] = useState([]);

  const handleAdd = (questionnumber, answer) => {

    const newAnswer = [...answers];
    newAnswer[questionnumber] = answer;
    setAnswers(newAnswer);

  }

I just want to collect all results into an array. When I click radio button of any answer, answer will be added to the array.

For example when I click "Answer one" radio button for Question2. So: "answers[2]: answer one". Then when I click "next" button and select answer for Question3 answers[3] object gonna be changed. If I go back to Question2 again and change my answer from "Answer one" to "Answer two" just edit to answers[2] object.

Final result should be like this:

answers[0]: null
answers[1]: answer of question1
answers[2]: answer of question2
answers[3]: answer of question3
answers[4]: answer of question4