Re-rendering is not happening while using Tanstack query

I'm fetching the API using Tankstack query. This is the custom hook to fetch the data,

import { useQuery } from "@tanstack/react-query";
import { ApiInstance } from "../axios/axios";
import { Endpoints } from "../endpoints/endpoints";

export const useGetApiDetails = (id) => {
  const { data, isLoading } = useQuery(["getApiDetails"], {
    queryFn: async () => {
      const { data } = await ApiInstance.get(Endpoints.getApiDetails(id));
      return data;
    },
  });
  return { data, isLoading };
};

This is where I'm using the custom hook,

const Home = () => {
  const { pathname } = useLocation();
  const id = pathname.replace("/", "");
  const { data, isLoading } = useGetApiDetails(id);
  const [apiDetails, setApiDetails] = useState();
  const [requestParamList, setRequestParamList] = useState();

  useEffect(() => {
    setApiDetails(data?.data?.apiDetails);
    setRequestParamList(data?.data?.requestParamList);
  }, [data]);

  return (
    <div className="w-full h-full flex">
      {/* {isLoading ? (
        <h1>Loading...</h1>
      ) : ( */}
      <>
        <LeftSide apiDetails={apiDetails} requiredParams={requestParamList} />
        <RightSide apiDetails={apiDetails} requiredParams={requestParamList} />
      </>
      {/* )} */}
    </div>
  );
};

export default Home;

I'm sending the id as params to fetch the particular data. And it is sent fine. But whenever the id is changed, the UI is not getting updated. It only updates when I navigate to other tab and comes back. Same I tried fetching using normal axios get method. It looks like this,

const { pathname } = useLocation();
  const id = pathname.replace("/", "");
  const [apiDetails, setApiDetails] = useState();
  const [requestParamList, setRequestParamList] = useState();

  const fetchData = async (id) => {
      const response = await ApiInstance.get(Endpoints.getApiDetails(id))
      console.log(response.data, "res");
      setApiDetails(response.data.data.apiDetails)
      setRequestParamList(response.data.data.requestParamList)
  }

  useEffect((id) => {
    fetchData(id)
  }, [id]);

With this code, the UI is updating correctly whenever the Id is changed by clicking. I don't know why it is not happening when using Tanstack query. Any help on this would be appreciated.

You should add the id also as dependency in query keys. This will uniquely identify the query to cache them and refetch automatically.

Refer this

import { useQuery } from "@tanstack/react-query";
import { ApiInstance } from "../axios/axios";
import { Endpoints } from "../endpoints/endpoints";

export const useGetApiDetails = (id) => {
  const { data, isLoading } = useQuery(["getApiDetails", id], {
    queryFn: async () => {
      const { data } = await ApiInstance.get(Endpoints.getApiDetails(id));
      return data;
    },
  });
  return { data, isLoading };
};