useState & splice Function not updating array correctly [duplicate]

I am creating an array called indicator_box (which is the length of numberofQuestions).
I am using useState to try to update the array with ‘correct/wrong’ everytime changeHandler is clicked.

When trying to debug I know indicator_box is updated when changeHandler is clicked, however this only seems to be temporary. As the array resets to empty when moving through the quiz app.

Any help would be great!

import React, { useState, useEffect, useRef } from 'react';

const Time_Question = ({ data, onAnswerUpdate, numberOfQuestions, activeQuestion, onSetActiveQuestion, onSetStep }) => {
  const [selected, setSelected] = useState('');
  const [error, setError] = useState('');
  const radiosWrapper = useRef();
  const [results, setResults] = useState([]);
  const [clickedItem, setClickedItem] = useState(null);
  const [indicator_box, setIndicator_box] = useState([]);


  var lengthArray = numberOfQuestions
  let indicator_box=[];
  for(; lengthArray--;)
    indicator_box.push([]);

  const changeHandler = (element) => {
    setSelected(element.target.value);
    const id = element.target.id;
    const class_d = element.target.className;
    let selectedTag = element ? parseInt(element.target.id, 10) : null;
    setResults([...results, { selectedTag}]);
    const selected = data.options[id]
    onAnswerUpdate(prevState => [...prevState, { q: data.question, a: selected }]);
    if ((data.options[id] === data.answer)){
      updateIndicator("correct");
    } else {
      updateIndicator("wrong");
    }
    if(error) {
      setError('');
    }
  }

  const updateIndicator = (markType) =>{
      setIndicator_box(indicator_box.splice(activeQuestion,1, markType));
  }

  const nextClickHandler = (element) => {
    if(selected === '') {
      return setError('Please select one option!');
    }
    setSelected('');
    if(activeQuestion < numberOfQuestions - 1) {
      onSetActiveQuestion(activeQuestion + 1);
      setClickedItem("");
    }else {
      onSetStep(3);
    }
  }



  return(
          <div className = "quiz-box custom-box" >
          <div className = "question-number" >
          <span > Question {activeQuestion+ 1} of < /span> {numberOfQuestions} </div>
                <div className="question-text">
                {data.question}
                </div>

          <div className="option-container ">
              {data.options.map((option, index) => (
          <div id={index} value={option}
           className={(index === clickedItem) & (data.options[index] === data.answer) ? "option correct already-answered" :
           (index === clickedItem) & (data.options[index] != data.answer) ? "option wrong already-answered":
           "option"}
          onClick={changeHandler} key={index}
            > {option}
          </div>
        ))}
          </div>

          <div className="next-question-btn">
          {error && <div className="has-text-danger">{error}</div>}
             <button type="button" className="btn" onClick={nextClickHandler}>Next</button>
          </div>
           <div className="answers-indicator">
            {indicator_box.map((indicator, index) => (
             <div id={index} key={index}
             className={ (indicator === "correct") ? "correct" :
              (indicator != "wrong") ? "wrong":
             ""}>{indicator}
           </div>
          ) )}
           </div>


          </div>
  );
}

export default Time_Question;