React Version Upgrade Throw Error on React Lazy or Suspense

Question

So I am working on an ReactJs App which was using React@16.13.1 in the Start. But Recently we have to update our App to the latest version of React. By Upgrading I am facing issue with React Lazy and Suspense and that they are throwing Errors.

It was Working Fine on Older Version (16.13.1).

import React, { lazy, Suspense, Fragment } from 'react';
import { Switch, Redirect, Route } from 'react-router-dom';

This is the array which is configuring Routes.

const routesConfig = [

{
  exact: true,
  path: '/app/training',
  component: () => <Redirect to="/app/training/trainings" />
},
{
  exact: true,
  path: '/app',
  component: () => <Redirect to="/app/reports/dashboard" />
},
{
  exact: true,
  path: '/app/participant',
  component: () => <Redirect to="/app/participant/participants" />
},
{
  exact: true,
  path: '/app/activity',
  component: () => <Redirect to="/app/activity/activities" />
},
{
  exact: true,
  path: '/app/selfPacedCourses',
  component: () => <Redirect to="/app/selfPacedCourses/courses" />
},
{
  exact: true,
  path: '/app/smsAndEmail',
  component: () => <Redirect to="/app/smsAndEmail/logs" />
},
{
  exact: true,
  path: '/app/resource',
  component: () => <Redirect to="/app/resource/resourcePersons" />
},
{
  exact: true,
  path: '/app/stakeholderTraining',
  component: () => <Redirect to="/app/stakeholderTraining/4WOrganizations" />
},
{
  exact: true,
  path: '/app/report',
  component: () => <Redirect to="/app/report/trainings" />
},
{
  exact: true,
  path: '/app/tna',
  component: () => <Redirect to="/app/tna/surveys" />
},
{
  exact: true,
  path: '/404',
  component: lazy(() => import('src/views/pages/Error404View'))
}, ... ]

This is how that Route Config Array is being Utilized

const renderRoutes = routes =>
  routes ? (
    <Suspense fallback={<LoadingScreen />}>
      <Switch>
        {routes.map((route, i) => {
          const Guard = route.guard || Fragment;
          const Layout = route.layout || Fragment;
          const Component = route.component;

          return (
            <Route
              key={i}
              path={route.path}
              exact={route.exact}
              render={props => (
                <Guard>
                  <Layout>
                    {route.routes ? (
                      renderRoutes(route.routes)
                    ) : (
                      <Component {...props} />
                    )}
                  </Layout>
                </Guard>
              )}
            />
          );
        })}
      </Switch>
    </Suspense>
  ) : null;

function Routes() {
  return renderRoutes(routesConfig);
}

export default Routes;

NOTE : This code is working on older Version of React. But It Crashes when I upgrade my package to latest version.