Pending components being rendered based on the tree's hierachy from the root route

export const rootRoute = createRouteConfig({
  pendingComponent: () => <div>parent Loading component</div>, // this doesn't work
  component: () => {
    return (
      <OidcAuthProvider>
        <Outlet />
      </OidcAuthProvider>
    );
  },
});
const agreementsRoute = rootRoute.createRoute({ path: "agreements" });
const agreementsIndexRoute = agreementsRoute.createRoute({
  path: "/",
  component: lazy(
    () => import("../pages/AgreementsSearch/AgreementsSearchPage")
  ),
  pendingComponent: () => <div>Loading component</div>
});
export const routeConfig = rootRoute.addChildren([ ... ]);

export const rootRoute = createRouteConfig({
  component: () => {
    return (
      <OidcAuthProvider>
        <Outlet />
      </OidcAuthProvider>
    );
  },
  pendingComponent: () => <div>Loading component</div>,
});
const agreementsRoute = rootRoute.createRoute({ path: "agreements" });
const agreementsIndexRoute = agreementsRoute.createRoute({
  path: "/",
  component: lazy(
    () => import("../pages/AgreementsSearch/AgreementsSearchPage") // uses the parent loader
  ),
});
const agreementsIndexRoute = agreementsRoute.createRoute({
  path: "$agreementId",
  component: lazy(
    () => import("../pages/AgreementView/AgreementViewPage")
  ),
  pendingComponent: () => <div>AgreementViewPage Loader component</div>
});
export const routeConfig = rootRoute.addChildren([ ... ]);