Uncaught Error Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reason

React
1

Im trying to use the useQuery and I get highlighted the queryKey with the following error message:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: void; }' is not assignable to parameter of type 'QueryKey'.
      Object literal may only specify known properties, and 'queryKey' does not exist in type 'readonly unknown[]'.ts(2769)
useQuery.d.ts(16, 25): The last overload is declared here.

Im using the following:

    "@chakra-ui/react": "^2.6.1",
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@tanstack/react-query": "4.28",
    "@tanstack/react-query-devtools": "4.28",
    "axios": "^1.4.0",
    "framer-motion": "^10.12.16",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"

This is my code trying to create a login Hook using React Query

import { useQuery } from '@tanstack/react-query';
import APIClient from '../services/api-client2';

interface AuthResponse {
  token: string;
  userId: string;
}

interface AuthError {
  message: string;
}

const useAuth = (email: string, password: string) => {
    const apiClient = new APIClient<AuthResponse,{email: string, password: string}>('/api/auth/login');
  
    const loginQuery = useQuery<AuthResponse, AuthError>({
        queryKey: ['auth', email, password],
        queryFn: apiClient.post({ email, password })
    }); 
  
    return {
      loginQuery,
    };
  };

export default useAuth;

Any help will be greatly appreciated.

2

Did you find a solution? i have the same problem now.