React-Router v6 : Lazy Loaded other library routes and components are not loading

I am new to React & React-Router@v6.

I was upgrading to react-router v6 from v5.3, and updated my local routes to v6 architecture.

v5 route file

import { lazy } from 'react';
import { Route, Switch } from 'react-router-dom';

const SchoolRoutes = () => {
    const login = lazy(() => import('./login/login'));

    // Component from Other Library as home page and acts as initial route
    const home = lazy(() => import('@portal-school/home').then(({ Home }) => ({ default: Home })));

    // Routes from Other libs
    const studentRoutes = lazy(() => import('@portal-school/school').then(({ Students }) => ({ default: Students, })));
    const activitiesRoutes = lazy(() => import('@portal-school/school').then(({ Activities }) => ({ default: Activities, })));
    const reportRoutes = lazy(() => import('@portal-school/reports').then(({ ReportRoutes }) => ({ default: ReportRoutes, })));

  return (
    <Switch>
      <Route exact path="/" component={home} />
      <Route exact path="/login" component={login} />
      <Route path="/students" component={studentRoutes} />
      <Route path="/activities" component={activitiesRoutes} />
      <Route path="/school-reports" component={reportRoutes} />
    </Switch>
  );
};
export default SchoolRoutes;

v6 route file

import React,{ lazy } from 'react';
import { Route, Routes } from 'react-router-dom';

const SchoolRoutes = () => {
  const Login = lazy(() => import('./login/login'));

//   Below is the home component that to be loaded.
  const Home = lazy(() => import('@portal-school/home').then(({ UserLogs }) => ({ default: UserLogs })));

//   Below are the routes from other libs to be loaded.
  const StudentRoutes = lazy(() => import('@portal-school/school').then(({ Students }) => ({ default: Students, })));
  const ActivitiesRoutes = lazy(() => import('@portal-school/school').then(({ Activities }) => ({ default: Activities, })));
  const ReportRoutes = lazy(() => import('@portal-school/reports').then(({ ReportRoutes }) => ({ default: ReportRoutes, })));

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/students/*" element={<StudentRoutes />} />
      <Route path="/activities/*" element={<ActivitiesRoutes />} />
      <Route path="/school-reports/*" element={<ReportRoutes />} />
    </Routes>
  );
};
export default SchoolRoutes;

Main App component

function App(){
return (
  <BrowserRouter>
     <AppBar className="app-header">
         <div className="school-logo"></div>
     </AppBar>
     <SideMenu/>
     //Injecting Routes Below
     <main className="main-blk">
        <Suspense fallback={<CircularProgress />}> // Circular Progress is loading

          // School Routes file injected below.
          <SchoolRoutes/>

        </Suspense>
     </main>
  </BrowserRouter>
)
}

So While trying to access the routes, the home screen is not loading, only Suspense fallback Message Renders, and when I try to access other Route Links, there is the same issue.

Components are not loading through the routes. Can anyone share a solution ?.

Update: I solved by moving the Suspense from App to SchoolRoutes.

Old SchoolRoutes File

<Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/students/*" element={<StudentRoutes />} />
      <Route path="/activities/*" element={<ActivitiesRoutes />} />
      <Route path="/school-reports/*" element={<ReportRoutes />} />
</Routes>

Updated SchoolRoutes File

<Suspense fallback={<CircularProgress />}>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/students/*" element={<StudentRoutes />} />
      <Route path="/activities/*" element={<ActivitiesRoutes />} />
      <Route path="/school-reports/*" element={<ReportRoutes />} />
    </Routes>
<Suspense/>