Exit animation not working properly in react-transition-group with React router v6

Question

I am working on a React website which is currently using react-transition-group@4.3.0 and react-router-dom@5.0.1. I am updating both the libraries to latest versions- react-transition-group@4.4.5 and react-router-dom@6.4.1.

Issue I am currently facing with the latest versions is that when I am going from routeA to routeB, routeB is rendering on top of routeA. Means, routeA is not unmounting from the UI. So, on the UI we have -

routeBComponent
routeAComponent

Here's the code of both files -

routes.js

import React, { lazy } from 'react';
import {
 Route,
 Navigate,
} from 'react-router-dom';

import AnimatedSwitch from './AnimatedSwitch';

const Home = lazy(() => import('views/Home'));
const Onboarding = lazy(() => import('views/Onboarding/Onboarding'));

const AppRoutes = () => (

 <AnimatedSwitch>
   <Route exact path="/" element={<Home />} />
   <Route exact path="/onboarding" element={<Navigate to="/onboarding/1" />} />
   <Route path="/onboarding/:step" element={<Onboarding />} />
 </AnimatedSwitch>
);

export default AppRoutes;

AnimatedSwitch.js

import React from 'react';
import {
  useLocation,
  Routes,
} from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import './AnimatedSwitch.scss';

const AnimatedSwitch = ({ children }) => {
  const location = useLocation();
  const timeout = { enter: 400, exit: 200 };
  const direction = 'left';

 
  return (
    <TransitionGroup component="div" className="container">
      <CSSTransition
        key={location.key}
        timeout={timeout}
        classNames="pageSlider"
        unmountOnExit
      >
        <div className={direction}>
          <Routes location={location}>
            {children}
          </Routes>
        </div>
      </CSSTransition>
    </TransitionGroup>
  );
};

export default AnimatedSwitch;

Thanks for any help in Advance.