Children route loader not works with react-query

export const getPizzaQuery = () => ({
  queryKey: ["pizzas"],
  queryFn: async () => {
    const { data } = await instance.get("/Pizzas");
    return data;
  },
});

export const loader = (queryClient) => async () => {
  // await queryClient.ensureQueryData(getPizzaQuery());
  return null;
};

export default function Root() {
  return (
    <>
      <Header />
      <Outlet />
    </>
  );
}

export const loader = (queryClient) => async () => {
  const query = getPizzaQuery();
  return (
    queryClient.getQueryData(query.queryKey) ??
    (await queryClient.fetchQuery(query))
  );
};

export default function PizzaPage() {
  const { data: pizzas } = useQuery(getPizzaQuery());
  return (
    <>
      {pizzas?.map((item, index) => (
        <div key={index}>
          {item.SliceId}
        </div>
      ))}
    </>
  );
}

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5,
    },
  },
});

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader(queryClient),
    errorElement: <Error />,
    children: [
      {
        path: "/homepage",
        element: <HomePage />,
        errorElement: <Error />,
      },
      {
        path: "/pizzapage",
        element: <PizzaPage />,
        loader: pizzaPageLoader(queryClient),
        errorElement: <Error />,
      },
    ],
  },
]);