我正在尝试使用rtkquery编写loginForm，收到错误消息需要帮助
LoginFom.js

import { useState,useEffect } from 'react';
import { useAuthenticateUserQuery } from '../store';
import { usersApi } from '../store/apis/userApi';
import { useNavigate } from 'react-router-dom';

function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);
const navigate = useNavigate();

const handleSubmit = async (e) => {
e.preventDefault();

const { data: matchingUser, isFetching } = useAuthenticateUserQuery({ email, password 
});

console.log('isFetching', isFetching);
console.log('matchingUser', matchingUser);

if (!isFetching) {
  if (matchingUser !== null) {
    setIsLoggedIn(true);
    navigate('/dashboard');
  } else {
    alert('Invalid username or password');
  }
}
};

return (
<form onSubmit={handleSubmit} className="max-w-sm mx-auto">
  <div className="mb-4">
    <label htmlFor="email" className="block text-gray-700 font-bold mb-2">
      Email
    </label>
    <input
      type="email"
      id="email"
      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  </div>
  <div className="mb-6">
    <label htmlFor="password" className="block text-gray-700 font-bold mb-2">
      Password
    </label>
    <input
      type="password"
      id="password"
      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
    />
  </div>
  <div className="flex items-center justify-between">
    <button
      type="submit"
      disabled={!email || !password || isFetching}
      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
    >
      Login
    </button>
  </div>
</form>
);
}

export default LoginForm;

UserAPI.js

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const usersApi = createApi({
reducerPath: 'usersApi',
baseQuery: fetchBaseQuery({
baseUrl: 'http://localhost:3005',
prepareHeaders: (headers, { getState }) => {
  const token = getState().auth.token;
  if (token) {
    headers.set('authorization', `Bearer ${token}`);
  }
  return headers;
},
 }),
endpoints: (builder) => ({
register: builder.mutation({
  query: (user) => ({
    url: '/users',
    method: 'POST',
    body: user,
  }),
}),
getUsers: builder.query({
  query: () => '/users',
}),
  authenticateUser : builder.query({
    query: (credentials) => ({
      url: '/users',
      method: 'GET',
      params: {
        email: credentials.email,
        password: credentials.password
      },
    }),
    transformResponse: (response, query) => {
      console.log("****",response)
     
      const users = response?.users;
      console.log(users,"**222**")
      const matchingUser = users?.find((u) => u.email === query.params.email && u.password === query.params.password);
      console.log(matchingUser,"**888**")
      return matchingUser || null;
    },
  }),
  

  }),
  });

  export const { useRegisterMutation, useGetUsersQuery, useAuthenticateUserQuery } = usersApi;

创建db.json作为本地jsonserver

{
 "users": [
{
  "username": "qq",
  "email": "qq@gmail.com",
  "password": "qq",
  "id": 1
}
]
}

我收到错误
第15行：48：React Hook“useAuthenticateUserQuery”在函数“handleSubmit”中被调用，该函数既不是React函数组件也不是自定义React Hook函数。React组件名称必须以大写字母开头。React Hook名称必须以单词“use”开头react-hooks/rules-of-hooks第59行：44：未定义“isFetching”