exitBeforeEnter is not working as intended - Trouble w/ Page Transitions

I'm trying to create a smooth page transition using a combination of react-router-dom and framer-motion, and I'm trying to have my pages fade out on exit and fade in on enter. But exitBeforeEnter is not working how it's supposed to. The page will not fade out on exit but the next page will fade in every time. Below is my code, and I'll attach one of the page files (all of the pages have pretty much the same code).

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

App.js

import React from 'react';
import About from "./pages/About.js"
import Home from "./pages/Home.js"
import Projects from "./pages/Projects.js"
import { AnimatePresence } from 'framer-motion'
import { BrowserRouter as Switch, Route, useLocation } from "react-router-dom";

function App() {

  const location = useLocation();

  return (
    <div className="App">
      <AnimatePresence exitBeforeEnter>
        <Switch location={location} key={location.pathname}>
          <Route path="/about" component={About} />
          <Route path="/projects" component={Projects} />
          <Route path="/" exact component={Home} />
        </Switch>
      </AnimatePresence>
    </div>
  );
}

export default App;

Home.js (Page File)

import React from 'react';
import '../css/main.css';
import '../css/index.css';
import particleText from '../components/ParticleText.js'
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion'

const pageVariants = {
  in: { 
    opacity: 1,
    transition: {
      duration: 1
    } 
  },
  out: { 
    opacity: 0,
    transition: {
      duration: 1
    } 
  }
}

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    try { particleText(true) } catch { /* Error */ }
    return (
      <motion.div className="main" initial="out" animate="in" exit="out" variants={pageVariants}>
        <div className="introOverlay"></div>
        <Link to="/about" className="homeButtonContainer">
            <p className="homeButtonText">About Me</p>
        </Link>
        <Link to="/projects" className="homeButtonContainer">
            <p className="homeButtonText">My Projects</p>
        </Link>
      </motion.div>
    );
  }
}

export default Home;

from Recent Questions - Stack Overflow https://ift.tt/3cDWo3s
https://ift.tt/eA8V8J