How to put a delay on <Switch> upon clicking on link for CSS-Transition exit animations

I have within my and it's performing the animations properly with CSSTransitions. However, the Switch is cancelling out the exit, and exit-active animations and it goes straight to doing the enter animation. Is it possible to set a delay on Switch to allow for the exit animation to finish?

I manually tried entering exit and exit-active, and it performs the animation fine.

But when a link is clicked, instead of:

<div class="exit and exit-active">

running, what it does is Switch automatically puts enter on top, negating the exit animation and it just goes straight to the enter animation

<div class="page slide-enter-done">
<div class="exit and exit-active">

App.js

import React, { Component } from 'react';
import {
  Route,
  NavLink,
  Switch
} from "react-router-dom";
import './App.css';
import './aboutme.css';
import AboutMe from './Projects';
import Home from './Home';
import About from './About';
import {
  CSSTransition,
  TransitionGroup,
} from 'react-transition-group';
// class component
class App extends Component {

  render() {

    return (
      <div className="App">
        <div className="nav">
          <NavLink exact to="/" activeClassName="active">Home</NavLink>
          <NavLink to="/about" activeClassName="active">About 
           Me</NavLink>
    </div>
    <Route render={({location}) => (
      <TransitionGroup>
        <CSSTransition 
          key={location.key}
          timeout={{enter: 300, exit: 400 }}
          classNames="slide"
        >
    <Switch location={location}>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
    </CSSTransition>
    </TransitionGroup>
      )} />

  </div>
);
  }
}

export default App;

App.css

.slide-enter {
  top: 0;
  left: 0;
  transform: translate3d(-100vw, 0, 0);
  color: transparent;
  background-color: #5a564c;
  position:relative;
  top:0px;
  width: 100vw;
  height: 100vh;

}
.slide-enter-active {
background-color: #9e8949;
transition: all 300ms;
transform: translate3d(0vw, 0, 0);
}

.slide-exit {
  background-color: #9e8949;
  transition: all 400ms;
  transform: translate3d(0vw, 0, 0);
}

.slide-exit-active {
transform: translate3d(100vw, 0, 0);
transition: all 300ms;
}

I want a way to show the exit-animation, but whenever a link is clicked, it "covers" the exit animation and goes straight to the enter animation