React Query useMutation is putting my API call state in Idle

I am using React Query to make API calls.

I have an OTP Generation API in which I am making a POST API call to generate an OTP as a response from the API I receive the status of OTP deliverance.

/* eslint-disable no-unused-vars */
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { TextField } from '../Input/TextField';
import { CustomButton } from '../Button/CustomButton';
import { MOBILE_NUMBER } from '../Common/Placeholder';
import { getOtpData } from '../../hooks/getOtp.hook';

export function MobileNumber() {
  const navigate = useNavigate();
  const [mobileno, setMobileNo] = useState('');
  const [isTermsAgree, setisTermsAgree] = useState(false);
  const [isDisplayLoader, setDisplayLoader] = useState(false);
  const [isDisplayError, setDisplayError] = useState(false);

  const { mutate, isError, isSuccess, isLoading, isIdle, data } =
    getOtpData();

  // Onchnage event for input mobile number
  const handleNumberChange = (
    e: React.ChangeEvent<HTMLInputElement>,
  ) => {
    setMobileNo(e.target.value);
  };

  // Onchnage event for Checkbox
  const TermsAgreeChange = () => {
    setisTermsAgree((current) => !current);
  };

  // onClick Event Confirm Btn //Generate OTP API call Goes Here
  const getOtp = () => {
    mutate(mobileno);
    if (isSuccess) {
      if (data?.data.otpSent) {
        console.log('Sent - true');
        navigate('/phone-otp-confirmation', {
          state: { phoneNumber: mobileno },
        });
      }
      if (data?.data.maxOtpRetriesExceeded) {
        setDisplayError(true);
      }
    }
    if (isError) {
      console.log('error');
    }
  };

  return (
    <div className="bg-grey-800 h-1/2 mt-40 flex flex-col justify-evenly font-Manrope ">
      <section>
        <div className=" flex-col flex  items-center md:items-baseline md:pl-36 ">
          <p className="  text-3xl "> Enter Mobile Number </p>
        </div>
        <div>
          <p className="text-l   flex-col flex  items-center mt-1  md:items-baseline md:pl-36 ">
            <span className=" text-gray-400  text-center ">
              Enter Mobile Number used for instant login
            </span>
          </p>
        </div>

        <div className="flex-col flex  items-center md:items-baseline md:pl-36 mt-5">
          <div className="  flex items-center sm:justify-start sm:px-0   ">
            <div>
              <div className=" flex w-18 px-3 justify-center items-center  bg-transparent rounded-bl-lg   rounded-tl-lg border text-2xl md:text-3xl  border-gray-700  h-12 md:h-16  focus:outline-none focus:bg-transparent">
                <span>+91</span>
              </div>
            </div>
            <div>
              <TextField
                width="w-48"
                height="h-12"
                padding="px-5"
                placeholder={MOBILE_NUMBER}
                maxlen={10}
                other="rounded-br-lg rounded-tr-lg  px-5 md:w-72 md:h-16"
                type="text"
                onChangeFunction={handleNumberChange}
                val={mobileno}
                error={false}
              />
            </div>
          </div>
        </div>
      </section>

      <div className="  flex-col flex mt-16 items-center md:items-baseline md:pl-36 md:mt-5  ">
        <div className="flex items-center w-72">
          <TextField
            width="w-7"
            height="h-7"
            type="checkbox"
            other="form-checkbox"
            onChangeFunction={TermsAgreeChange}
          />
          <p className="ml-3 text-sm md:text-base tracking-wide text-gray-400 font-extralight">
            I have read the OneCard{' '}
            <a
              href="http://"
              className="underline text-sm md:text-base text-gray-400"
            >
              Terms and Conditions & Privacy Policy
            </a>{' '}
          </p>
        </div>
        <div className="mt-8 ">
          <CustomButton
            clickEvent={getOtp}
            btntext="Get OTP"
            isbuttonactive={mobileno.length === 10 && isTermsAgree}
          />
        </div>
        {/* <h2>Loader</h2>
        <h2>Error</h2> */}
      </div>
    </div>
  );
}

OTP Generation hook

import { useMutation } from 'react-query';
import axios from 'axios';
import { WEB } from '../constants/constants';

interface IGetOTPResult {
  otpSent: boolean;
  maxOtpRetriesExceeded: boolean;
}

const getOTP = async (mobileNumber: string) => {
  const response = await axios.post<IGetOTPResult>(
    `${process.env.REACT_APP_URL}/`,
    {
      mobile: mobileNumber
    },
    {
      headers: {
        Authorization: '',
        'Content-Type': 'application/json',
      },
    },
  );

  return response;
};

export const getOtpData = () => {
  return useMutation(getOTP);
};

PROBLEM : As soon as I make this API call through the frontend as I click the button, it goes into isIdle state to be true.
Only the second time, I click the button, isSuccess becomes true.

However, bot the times the API call is made and I receive a 200 response!

I want to ensure my API call never enters isIdle state.

Plus, there is no significant information given about isIDle in any of react-queries documentation.

How do I go about this?