React Lazy Loading Routes with Page Transitions

Looking up, down, and sideways for a solution to this problem.

My goal is to assign Lazy Loading to nearly all components in my React website. However, these components utilize framer-motion page transitions when the components enter and exit. The combination of page transitions and lazy loading is causing the component to no longer load properly when clicked on as a Route.

I found inspiration from this post (https://github.com/reactjs/react-transition-group/issues/580) and tried to introduce the "react-lazy-with-preload" package (https://github.com/ianschmitz/react-lazy-with-preload), however I was unsuccessful in getting it to work.

Is anyone aware of a solution to this issue? I surely can't be the only person trying to data split a React website at the component level while also having page-transitions in each of the components.

App.js Code below:

import React, { Suspense } from 'react';
import { Switch, Route, useLocation } from 'react-router-dom';
import lazy from "react-lazy-with-preload";
import { AnimatePresence } from 'framer-motion';

////////////////////////////////////////////////
//PREPARE PAGES OF WEBSITE AS LAZY LOADED PAGES
import Navbar from './components/layout/Navbar/Navbar';
import Footer from './components/layout/Footer/Footer';
import Home from './components/layout/Homepage/Home';
const Dashboard = lazy(() => import('./components/dashboard/Dashboard'));
const Login = lazy(() => import('./components/authorization/login/LoginComponent'));
const SignUp = lazy(() => import('./components/authorization/signup/SignupComponent'));
const OurTeam  = lazy(() => import( './components/layout/OurTeam/OurTeam'));

function App () {

  let location = useLocation();

  //Trying to preload the components which contain Page-Transitions
  OurTeam.preload();
  Login.preload();
  SignUp.preload();
  Dashboard.preload();


    return (
      
        <div className='page-container'>

          <div className='content-wrap'>

            <Navbar />

            <AnimatePresence exitBeforeEnter> {/* Exit page transition occurs before next page loads. */}

            <ScrollToTop/> {/* Causes the screen to scroll to the top after routing occurs. */}

              <Switch location={location} key={location.pathname}> {/* Switch is used to make sure only 1 route is loaded up at a time. location and key are used for page transition animation.*/}
                
                {/*Homepage will not be data-split and will always be loaded */}
                <Route exact path='/' component={Home} />

                <Suspense fallback='Loading...'>
                  <Route path='/OurTeam' component={OurTeam} />
                </Suspense>
                  
                <Suspense fallback='Loading...'>
                  <Route path='/dashboard' component={Dashboard}/>
                </Suspense>

                <Suspense fallback='Loading...'>
                <Route path='/login' component={Login} />
                </Suspense>

                <Suspense fallback='Loading...'>
                  <Route path='/signup' component={SignUp} />
                </Suspense>

              </Switch>

            </AnimatePresence>

          </div>

          <Footer/>
          
        </div>
        
      
    );
    
  //}

}
  
export default App;