How can I apply React Router v6 and react-transition-group transition to only specific routes?

Question

what can I do if I want to exclude some 'routes' from the transition?

For example, the routes are as follows;

<Routes>
  <Route path="/login" element={<Login />} />
  <Route path="/" element={(<React.Suspense fallback={<>...</>}><Layout layout="vertical" /></React.Suspense>)}>
     <Route index element={(<React.Suspense fallback={<>...</>}><Dashboard /></React.Suspense>)} />
     <Route path="/page" element={(<React.Suspense fallback={<>...</>}><Page /></React.Suspense>)} />
     <Route path="/page-second" element={(<React.Suspense fallback={<>...</>}><PageSecond /></React.Suspense>)} />
  </Route>
  <Route path="*" element={(<React.Suspense fallback={<>...</>}><NoMatch /></React.Suspense>)} />
</Routes>

There will be no animation on the login and error pages, but there will be animation in the dashboard. When I do the transition with the outlet, the animation is not complete, does anyone have an idea for a solution?

<TransitionGroup component={null}>
  <CSSTransition
    nodeRef={nodeRef}
    classNames="fade"
    key={location.pathname}
    timeout={300}
  >
    <div ref={nodeRef} className="outlet">
      <Outlet />
    </div>
  </CSSTransition>
</TransitionGroup>

Demo: https://codesandbox.io/s/quirky-euler-qyo4zf?file=/src/views/index.jsx