Reactjs React CSSTransition 两次创建新页面并在这两个相同的页面上运行转换

我用react-router和useNavigate在页面之间切换.使用CSSTransition，我想在页面之间进行平滑的过渡.不幸的是，它没有按预期工作，路由立即删除当前页面，并创建两次新页面，然后在这两个相同页面上执行转换.

App.js

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  BrowserRouter,
  Router,
  Route,
  Routes,
  useLocation
} from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import { Nav, Navbar, NavDropdown } from "react-bootstrap";
import { useNavigate } from "react-router-dom";

import Settings from "./Settings";
import TestPage from "./TestPage";

function App() {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <div className="App">
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="#home">Blaa</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link onClick={() => navigate("/settings")}>Settings</Nav.Link>
            <Nav.Link onClick={() => navigate("/testPage")}>TestPage</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

      <TransitionGroup component={null}>
        <CSSTransition key={location.key} classNames="fade" timeout={3000}>
          <Routes>
            <Route path="/settings" element={<Settings />} />
            <Route path="/testPage" element={<TestPage />} />
          </Routes>
        </CSSTransition>
      </TransitionGroup>
    </div>
  );
}

const Root = () => (
  <BrowserRouter basename={window.location.pathname.replace(/(\/[^/]+)$/, "")}>
    <div className="App">
      <App />
    </div>
    <br />
  </BrowserRouter>
);

export default Root;

以下是代码:https://codesandbox.io/s/cool-moon-l99ogc

这种方法有什么问题？我找不到解决办法.