Infinite spinner problem in dependent query using tanstack/react-query

In a react.js(18.2) project. I am using @tanstack/react-query(4.29.15). Facing a problem of infinite spinner loading which is caused by the case of dependent query in react-query.

In the code below, the infinite spinner inside 2nd select is running.

The case here should be , on selection of fire dropdown in field two, True value will set to the fire state , which will make Boolean(fire) value also to true , consequently enable the fetching 2nd query.

import { useQuery } from "react-query";
import axios from "axios";
import { useState } from "react";

const fetchUserByEmail = (email) => {
  return axios.get(`http://localhost:4000/users/${email}`);
};

const fetchCoursesByChannelId = (channelId) => {
  return axios.get(`http://localhost:4000/channels/${channelId}`);
};

export const DependentQueriesPage = ({ email }) => {
  const [fire, setFire] = useState("");
  const [water, setWater] = useState("");

  const { isLoading: isUserLoading, data: user } = useQuery(
    ["user", email],
    () => fetchUserByEmail(email)
  );
  const channelId = user?.data?.channelId;

  const { isLoading: isSubUserLoading, data: courses } = useQuery(
    ["courses", channelId],
    () => fetchCoursesByChannelId(channelId),
    {
      enabled: Boolean(fire),
    }
  );

  return (
    <>
      <div>DependentQueries</div>
      <select onChange={() => setFire("on")}>
        <option>select fire</option>
        <option>one</option>
        <option>oned</option>
      </select>
      { isSubUserLoading ?
        <select onChange={() => setWater("on")}>
        <option>select water</option>
        <option>one</option>
        <option>oned</option>
      </select>
      :
      <p> water spinner ...</p>
      }
    </>
  );
};

Please help me in resolve this issue of infinite spinner

Screenshot of chrome browser