عدم إظهار علامة التحميل عند إرسال البيانات للخادم React Tanstack-query

السلام عليكم.

عند إرسال البيانات للخادم

const submitHandler = async (e) => {
    e.preventDefault();
    mutate(
      { unique_identifier, password },
      { onSuccess: () => navigate("/dashboard") }
    );
  };

لاتظهر علامة التحميل spinner في الكود التالي 

<button
          type="submit"
          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-lg transition duration-300 ease-in-out"
          disabled={isLoading}
        >
          {isLoading ? (
            <ScaleLoader color="#ffffff" height={12} width={3} />
          ) : (
            "Login"
          )}
        </button>

loginApi

import axios from "axios";

export const loginApi = async(data) => {
    try {
        const res = await axios.post(
            `${process.env.REACT_APP_USER_URL}/login`,
            data
          );
          return res.data;
    } catch (error) {
        throw error.response.data.message
    }
}

useLoginMutation

import { useMutation } from "@tanstack/react-query";
import { loginApi } from "../api/userApi";

export const useLoginMutation = () => {
    return useMutation({
      mutationFn: async (data) => await loginApi(data),
      onSuccess: (data) => localStorage.setItem("token", data.token),
    });
};

شكرا.