Local State Storage Does this make sense?

// Is this overkill as a Context replacement for local state hook? I really like the idea of keeping all state in react-query..
export const useOnboardingWizard = () => {
  const [activeStep, setActiveStep] = useState(0)
  const [options, setOptions] = useState({ test: 'test' })

  const queryClient = useQueryClient()

  useEffect(() => {
    queryClient.setQueryData(['onboarding_wizard'], {
      activeStep,
      setActiveStep,
      options,
      setOptions
    })

  }, [options])

  return useQuery({
    queryKey: ['onboarding_wizard'],
    queryFn: () => ({
      activeStep,
      setActiveStep,
      options,
      setOptions
    }),
    refetchOnWindowFocus: false
  })
}

// Is this overkill as a Context replacement for local state hook? I really like the idea of keeping all state in react-query..
export const useOnboardingWizard = () => {
  const [activeStep, setActiveStep] = useState(0)
  const [options, setOptions] = useState({ test: 'test' })

  const queryClient = useQueryClient()

  useEffect(() => {
    queryClient.setQueryData(['onboarding_wizard'], {
      activeStep,
      setActiveStep,
      options,
      setOptions
    })

  }, [options])

  return useQuery({
    queryKey: ['onboarding_wizard'],
    queryFn: () => ({
      activeStep,
      setActiveStep,
      options,
      setOptions
    }),
    refetchOnWindowFocus: false
  })
}