Infinite loop when conditionally call child component calls the same query which is causing an error

import { useQuery } from "@tanstack/react-query";

export default function Parent() {
  const { data, isLoading } = useQuery({
    queryKey: ["brand", "random-to-throw-error"],
    queryFn: async () => {
      try {
        const response = await fetch("/api/brands/random-to-throw-error");
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return (await response.json()).data;
      } catch (error) {
        throw error;
      }
    },
  });

  if (isLoading) return <div>Loading...</div>;

  return (
    <>
      Parent: {data?.companyName}
      <Child />
    </>
  );
}

function Child() {
  const { data, isLoading } = useQuery({
    queryKey: ["brand", "random-to-throw-error"],
    queryFn: async () => {
      try {
        const response = await fetch("/api/brands/random-to-throw-error");
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return (await response.json()).data;
      } catch (error) {
        throw error;
      }
    },
  });

  return <>Child: {data?.companyName}</>;
}

refetchOnMount: false,
retry: 0,
refetchOnWindowFocus: true,
refetchOnReconnect: false,