React-Router-Dom V6 With React Transition Group - Rendring Probelm

Question

I came acroos a wird situation, i've implmented basic fade in animation to my pages.

Everything works and the animation looks great too.

But I found that actually CSSTransitiongroup render the page twice! (when refreshing, it only render once but when navigating using react-router-dom it render the page twice)

If somone came across the same issue and can help me I would really appreciate it!

Here is the Code

App.tsx

const App: React.FC = () => {
  const location = useLocation();
  return (
    <TransitionGroup component={null}>
      <CSSTransition key={location.key} classNames="fade" timeout={1000}>
        <MyRoutes />
      </CSSTransition>
    </TransitionGroup>
  );
};

MyRoutes.tsx

export const MyRoutes: React.FC = () => {
  return (
    <Routes>
      <Route element={<PrivateRoute />}>
        <Route element={<NaviBar />}>
          <Route path="/" element={<Home />} />

          <Route path="/profile" element={<Profile />} />
          <Route path="profile/:id" element={<ProfilePage />} />

          ........

        </Route>
        <Route path="*" element={<NotFound />} />
      </Route>

      <Route path="/login" element={<Login />} />
    </Routes>
  );
};

Note: When debugging I tried to removed "PrivateRoute" and "NaviBar" Because they nesting the rest of the Routes (and use Outlet) but it still render the page twice when navigating...