React-Router V6: How to add transitions when using useRoutes() hook

Question

I am using react-router v6 with the useRoutes() hook (docs).

And I am trying to add route transitions with react-transition-group.

I tried a bunch of different stuff, but the animations are just not clean and dont work for the child routes - the whole layout animates rather than the child.

export const App = () => {
  const routes: RouteObject[] = [
    {
      path: "/",
      element: <Layout />,
      children: [
        { index: true, element: <Home /> },
        {
          path: "/courses",
          element: <Courses />,
          children: [
            { index: true, element: <CoursesIndex /> },
            { path: "/courses/:id", element: <Course /> },
          ],
        },
        { path: "*", element: <NoMatch /> },
      ],
    },
  ];

  const element = useRoutes(routes);
  const location = useLocation()

  return (
    <TransitionGroup>
      <CSSTransition
        key={location.key}
        classNames="slide"
        timeout={1000}
      >
        {element}
      </CSSTransition>
    </TransitionGroup>
  );
}

export const Layout = () => {
  return <Outlet />;
}