How to call API asynchronously based on other API response using using React useQuery and useHook mutations?

Question

I am calling two API's, getOperator and second is getPlans after data recieved from getOperator API.

getOperator take phone_number as input and give two values in response -

{
 operator: 'AT&T',
 circle: 'Washington'
}

const[phoneNumber, setPhoneNumber] = useState<Number>(0)  ;
const[plans,setPlans] = useState(null);
const[operator, setOperator]=useState(null);
const[operatorName, setOperatorName]=useState(null);
const[circleName,setCircleName] = useState(null);
const [loading,setLoading] = useState(false);

getOperator is called when phoneNumber length == 10.

function callApi(value:any) {
  plans == null ? setLoading(true) : setLoading(false)
  setPhoneNumber(value);
  onSubmit(value);
 }

const handleOnChange = (e: any) => {
  setPlans(null);
  setOperator(null);
  setOperatorName(null);
  setCircleName(null);
  setPhoneNumber(e.target.value);
  const value = e.target.value;
  value.toString().length === 10 && callApi(value);
};

const getOperatorDetails = async (data:any) => {

  const { data: response } = await http.post(API_ENDPOINTS.OPERATOR, data);
  
  return response;
};

const getRechargePlans = async (data:any) => {
  const { data: plans } = await http.post(API_ENDPOINTS.RECHARGE_PLANS, data);
  setPlans(plans)
  return plans;

};
 const { mutate: mutatePlan } = useMutation(getRechargePlans, {
  onSuccess: data => {
    setPlans(data);
    addOnPlansList();
    setLoading(false);
   
  },

  onError: () => {
    alert("error")
    setLoading(false)
  },


});

const { mutate: mutateOperator } = useMutation(getOperatorDetails, {

  onSuccess: (data) => {
    setOperator(data)
    setOperatorName(data?.operator)
    setCircleName(data?.circle)
    console.log('operator plans',data);
  },

  onError: (error:any) => {
    alert(error?.msg)
  },

});

const onSubmit = async  (value:any) => {
  const opr = {
    'mobile_no': value,
  }
  
  mutateOperator(opr);

  const plan =  {
    'operator' :  operatorName,
    'circle'   :  circleName,
  };
  mutatePlan(plan);
};

FetchOperator is working fine but circleName and operatorName state is not updated after getRechargePlans is called. useState hook is keeping the previous state

<Input  label='Phone number'
                    variant=''
                    type='text'
                    className='rounded-lg'
                    pattern="[0-9]*"
                    inputMode="numeric"
                    onChange={(e)=>handleOnChange(e)}
                    maxLength={10}
                 {(e:any)=>setPhoneNumber(e.target.value)}
            />