Using React SwitchTransition with Mount and Unmount Components

Question

When mounting a component with a routing path I want to trigger a CSSTransition. My goal is to have the Component which is about to be unmounted persist long enough for the mounting component to fully transition in.

An analog equivalency would be sliding two cards over each other and only then remove the obscured/hidden card below.

import {
  Switch,
  BrowserRouter,
  Route,
  Redirect,
  useLocation,
} from 'react-router-dom';
import {
  CSSTransition,
  TransitionGroup,
  SwitchTransition,
} from 'react-transition-group';

import NavBar from './jsx/NavBar';
import Home from './jsx/Home';
import SomePage from './jsx/SomePage';

function App() {
  let location = useLocation();
  return (
    <div className='App'>
      <NavBar />
      <TransitionGroup>
        <SwitchTransition mode='in-out'>
          <CSSTransition
            key={location.key}
            classNames='slide'
            timeout={{
              enter: 0,
              exit: 500,
            }}
          >
            <Switch>
              <Route path='/' exact>
                <Redirect to='/home' />
              </Route>
              <Route path='/home' component={Home} exact />
              <Route path='/page' component={SomePage} />
            </Switch>
          </CSSTransition>
        </SwitchTransition>
      </TransitionGroup>
    </div>
  );
}

.navbar {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}

.home {
  height: 100vh;


.some-page {
  height: 100vh;
  width: 100%;
  transform: translateY(100vh);
  background-color: red;
}

.animate {
  position: absolute;
  z-index: 1;
  top: 0;
  transition: transform 0.75s ease-in;
  overflow: hidden;
}

.slide-enter-done {
  transform: translateY(0vh);