Setup with Suspense, React-Location and React-Query

[skalidindi]

I have my examples router setup as follows

import { lazy, Suspense } from 'react';
const Login = lazy(() => import('@/components/Login/Login'));
const Jobs = lazy(() => import('@/components/Jobs/Jobs'));
const NotFound = lazy(() => import('@/components/NotFound/NotFound'));

const routes = [
    {
      path: AppRoutePaths.LOGIN,
      element: (
        <Suspense
          fallback={
            <DelayedFallback>
              <LoadingFallback />
            </DelayedFallback>
          }
        >
          <Login />
        </Suspense>
      ),
    },
    {
      path: '/',
      id: 'root',
      element: <Layout />,
      children: [
        { path: '/', id: 'redirect-jobs', element: <Navigate to={AppRoutePaths.JOBS} /> },
        {
          path: AppRoutePaths.JOBS,
          meta: {
            breadcrumb: 'Jobs',
          },
          element: (
            <Suspense
              fallback={
                <DelayedFallback>
                  <LoadingFallback />
                </DelayedFallback>
              }
            >
              <Jobs />
            </Suspense>
          ),
          loader() {
            queryClient.prefetchQuery(Queries.JOBS, () => fetchJobs(REGION_ENVS));
            return {};
          },
        },
        {
          element: (
            <Suspense
              fallback={
                <DelayedFallback>
                  <LoadingFallback />
                </DelayedFallback>
              }
            >
              <NotFound />
            </Suspense>
          ),
        },
      ],
    },
  ];

I know that React Location has its own way to dealing with loading and errors i.e with errorElement and pendingElement specified but since I am using React Query with suspense mode enabled, wondering if it makes sense to setup my router as follows rather than using the async loading features of React Location.