Array overriding elements

Question

I'm having trouble understanding why my array is not incrementing new elements, but replacing the existing ones.

The code refers to a function that is called in a child component and passes through the props two parameters, and whenever it is called, I store the value of these two parameters in the array through the .push call, but using the console log as a debugger , I noticed that the values are being overwritten after the new call of the function in another step of the system.

About the code, it is part of a questionnaire, where the function is called at each user interaction with the alternatives provided.

the code:

const [question, setQuestion] = useState({ //Create a state to update the Questions and Answers
        title: 'title',
        option1: 'product',
        option2: 'kit',
        option3: '',
        option4: ''
    });

const arrayAnswers: string[] = []; 

    const childToParent = (per, res) => {
        console.log(arrayAnswers)
        if(per.title== question.title){
            if(res == 'A'){
                arrayAnswers.push(per, res); //Store the question and answers provided by children component into the array
                setQuestion(prevQuestion => { 
                    return {
                        ...prevQuestion, 
                        title: "title 1", 
                        option1: "inputText",
                        option2: ''
                    }
                })
            }else if(res == 'B'){
                arrayAnswers.push(per, res); 
                
            }else if(res != ''){
                arrayAnswers.push(per, res) 
                setQuestion(prevQuestion => { 
                    return {
                        ...prevQuestion,
                        title: "title 2",
                        option1: "input",
                    }
                })
            }
        }
    }

.....

Component call:

EDIT

As some colleagues mentioned, creating the same array in a state, I did it but the problem persisted, I had to make just a few changes in the creation of the array because I was working with typescript.

........
const [question, setQuestion] = useState({
            title: 'title',
            option1: 'product',
            option2: 'Kit',
            option3: '',
            option4: ''
        });
        const [arrayAnswer, setArrayAnswer] = useState<{question: string, answer: string}[]>(
            [],
        ); //Create the state array with typescript
.......

const childToParent = (per, res) => {
        if(per.title== question.title){
            if(res == 'A'){
                setArrayAnswer([
                    ...arrayAnswer,
                    {question: per, answer: res}
                ])

                setQuestion(prevQuestion => {
                    return {
                        ...prevQuestion, 
                        title: "title1", 
                        option1: "inputText",
                        option2: ''
                    }
                })
            }else if(res == 'B'){
                setArrayAnswer([
                    ...arrayAnswer,
                    {question: per, answer: res}
                ])
                
            }else if(res != ''){
                setArrayAnswer([
                    ...arrayAnswer,
                    {question: per, answer: res}
                ])
                
                setQuestion(prevQuestion => {
                    return {
                        ...prevQuestion,
                        title: "title3",
                        option1: "input",
                    }
                })
            }
        }
    }

EDIT 2 / SOLUTION

i think i win this problem so many times during my tests, but i was seeing it the wrong way, i was testing putting console.logs inside of the function "childToParent", who always accused the the problem of array being "overriding" the elements , but, putting the console.log outside the function , where the state has been declared, this gave me the answer i was waiting for, a array with all the questions and answers of the questionary

for who are having similar problem then me, i added the follow code to make it works:

type Question ={ //Creates a type for the array
    question: string,
    answer: string
 }

const [answer, setAnswers] = useState([]) //Declaration of the state of Array

setAnswers(prevAnswers => [ //Set a new state into the array with new Data
     ...prevAnswers,
     {question: per, answer: res}
])

Array overriding elements

0 Answers