React Pose component change before transition

Question

I'm moving to React and need to use React Pose.

Javascript code:

import React from 'react';
import '../assets/style.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import posed, { PoseGroup } from 'react-pose';


import Home from "./Home";
import About from "./About";

const RouteContainer = posed.div({
    enter: { opacity: 1, delay: 300, beforeChildren: false },
    exit: { opacity: 0 }
});

function App() {
    return (
        <Router>
            <div>
                <Route render={({ location }) => (
                    <PoseGroup>
                        <RouteContainer key={location.key}> 
                            <Switch>
                                <Route exact path="/" component={Home} key="" />
                                <Route path="/home" component={Home} key="home" />
                                <Route path="/about" component={About} key="about" />
                            </Switch>
                        </RouteContainer>
                    </PoseGroup>
                )}/>
                <div className="link" id="route">
                    <Link to="/home" className="route">Home</Link> • <Link to="/about" className="route">About</Link>
                </div>
            </div>
        </Router>
    );
}

export default App;

When I click the link, the component is showing the clicked-content first and then doing exit and enter.

click link, change component, exit, enter

What it should be is

click link, exit, change component, enter