I am currently building a quiz-type game with React.

However, I am getting an error seemingly at random sometimes.

The error that it shows me is:

const state=useContext(QuestionsStateContext)
  11 |   let question=state.question[0]
> 12 |   let photoSrc=question.questionPhoto.value;
return (
  14 |         <>
  15 |         <div className='cardquestion'>

I don't think the problem is here. I think it might be an issue with state, that it's not resetting the questions after it's finished. I was wondering how I can reset the state of the deck of questions after completion, so that it can restart the test. I don't know for sure yet if this is the problem either, so any help appreciated, thanks.

Also, this is the part of the quiz game that handles the logic. I still am not sure where the problem is and have been struggling to figure it out for a while now.

    import { nanoid } from "nanoid";

    export const shuffler = (a) => {

    for (let i = a.length - 1; i > 0; i--) {

      const j = Math.floor(Math.random() * (i + 1));

       [a[i], a[j]] = [a[j], a[i]];

         }

         return a;

    };


      // takes 10 random cards from shuffled deck of each type
      const deckMaker=(arr)=>{
      const newDeck=shuffler(arr)
      const tenCards=newDeck.slice(0,10)
      return tenCards
    }

    // shuffle each type first... then combine
    // and then shuffle twice. 
    const deckOne=deckMaker(oneType)
    const deckTwo=deckMaker(twoType)
    const deckThree=deckMaker(threeType)
    const deck=deckOne.concat(deckTwo)
    const finalDeck=deck.concat(deckThree)
    const shuffledFinal=shuffler(finalDeck);

    export const deckShuffled=shuffler(shuffledFinal)

Thank you!