route.tsx pendingComponent is rendering when index.tsx loader runs

└── routes/
    ├── (hcp)/
    │   └── search
    │       ├── index.tsx
    │       ├── route.tsx

import { createFileRoute } from '@tanstack/react-router';
import SearchPage from '@/pages/search';

export const Route = createFileRoute('/(hcp)/search')({
  component: SearchPage,
  pendingComponent: () => <div>Loading From Route</div>
});

export const Route = createFileRoute('/(hcp)/search/')({
  beforeLoad: authGuard,
  component: Results,
  pendingComponent: () => <div>Loading From Index!</div>,
  validateSearch: zodSearchValidator(searchQueryParamsSchema),
  loaderDeps: ({ search }) => search,
  loader: ({ deps }) => {
    const queryOption = getSearchQueryOptions(deps)
    return queryClient.ensureQueryData(queryOption)
  },
})