So here's the code that I'm working on right now (attached file - since its too big)
Basically I want to grab the unusedQuestionsIds and based on the numbers left in array fetch the questions. But even tho the data gets fetched properly the state doesnt change (I use custom hook with Tanstack Query v4 for this). The worst part is that the code works perfectly fine if I set the static parameter for the hook useQuestionWithAnswers. So I'm guessing that the problem is somewhere within my state management but I'm too stupid to see this. Please help 😄

here's the custom hook I wrote:

import { Answer, Question } from "@prisma/client"
import { useQuery } from "@tanstack/react-query"
import axios from "axios"

export interface QuestionWithAnswers extends Question {
  answers: Array<Omit<Answer, "isCorrect">>
}

export const useQuestionWithAnswers = (questionId: number | null) => {
  return useQuery({
    queryFn: async () => {
      try {
        const { data } = await axios.get(`/api/quiz/question/${questionId}`, {
          headers: { Accept: "application/json" },
        })

        return data
      } catch (error) {
        if (axios.isAxiosError(error)) {
          throw new Error(error.message)
        }

        throw new Error("An unexpected error has occured")
      }
    },
    queryKey: [`question-${questionId}`, questionId],
    enabled: false,
  })
}

export default useQuestionWithAnswers