Почему возникает ошибка с react.query?

Question

[smoovil]

Хочу сделать компоненту в которой происходит авторизация с помощью react.query, но выходит ошибка
index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { QueryClientProvider, QueryClient } from 'react-query';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <QueryClientProvider client={QueryClient}>
    <App />
    </QueryClientProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

vhod:

import axios from "axios";
import React, {useState} from "react";
import { useForm } from 'react-hook-form';
import { NavLink } from "react-router-dom";
import {useMutation} from "react-query"
const API_URL = "{host}"
const Vhod = () => {
    const [user, setUser] = useState(null);
    const [login, setLogin] = useState("");
    const [password, setPasswrod] = useState("");
    const {mutate, isLoading} = useMutation(
        'login',
        () =>
        axios.post(
            `${API_URL}/auth`,
            {login, password},
            {
                headers: {'Content-Type':
            "application/json"}
            }
        ),
        {
            onSuccess: ({ data }) => {
                setUser(data.user)
            }
        }
       
    )
  const {
    register,
    formState: {errors, isValid},
    handleSubmit,
    reset,
  } = useForm()
  
  const onSubmit = (data) => {
    reset()
      console.log(data)
      axios.post("https://jsonplaceholder.typicode.com/posts", {
"userId": 2,
"id": 234,
"title": data.firstName,
          "body": data.password,
      })
  }
    return (
        <>
        {!user ? (
                <div>
                    <form onSubmit={handleSubmit(onSubmit)} >
                        <div>
                            <div >{errors?.firstName && <p>{errors?.firstName?.message || "error"}</p>}</div>
                            <label htmlFor="login">Login</label>

                            <input onChange={e => setLogin(e.target.value)} value={login} name="login" {...register("firstName",
                                {
                                    required: "Введите имя"
                                })} type="text" placeholder="Имя" className="name" />
                        </div>

                        <div>
                            <div >{errors?.password && <p>{errors?.password?.message || "error"}</p>} </div>
                            <label htmlFor="password">Password</label>
                            <input onChange={e => setPasswrod(e.target.value)} value={password} name="passwrod"
                                {...register("password",
                                    {
                                        required: "Введите пароль",
                                        minLength: {
                                            value: 5,
                                            message: "мин 5 символов"
                                        }
                                    })} type="passwrod" placeholder="Пароль" className="password" />
                        </div>
                        <input type="submit" onClick={(mutate())} disabled={!isLoading} />
                    </form>
                </div>
        ) : (
                    <div>
                        <p>Вы авторизованы</p>
                        <NavLink to={"/test"}>Перейти</NavLink>
                    </div>
        ) }
        
        </>
    )
}

export default Vhod;