Reactで特定pathの配下へ出入りするときに限り画面遷移アニメーションを適用したい

解決したいこと

Reactで特定pathの配下へ出入りするときに限り画面遷移アニメーションを適用したい。

↓のようなルーティングがあるとき、

<Route path="main" element={<Main />} />
<Route path="sub">
    <Route path="a" element={<A />} />
    <Route path="b" element={<B />} />
</Route>

1. /main から /sub/a か /sub/b に移動するときは画面遷移アニメーション（スライドアウト＆スライドイン）を適用。
2. /sub/a、/sub/b 間ではアニメーションなし（通常通りに遷移）。
3. /sub/a か /sub/b から /main に移動するときは 1. で適用した逆の向きに画面遷移アニメーション（スライドアウト＆スライドイン）。

これを実現したいです。

アニメーションのイメージとしては、react-transition-groupを使ってページ遷移にスライドアニメーションをつける方法 で紹介されているものに、スライドアウトを追加したものです。
この記事のコードを修正し、 /->/bのみアニメーションを適用することができれば応用で実現可能であると考え、
CSSTransitionをelementの中に書くなどを試したのですが、アニメーションは発火しませんでした。
同じ方の記事で、特定のpath配下のみreact-transition-groupを使ってページ遷移にスライドアニメーションをつける方法 がありましたが、
今回実現したいものは真逆で、特定のpath配下に出入りしたときにアニメーションをつけたいです。

react-transition-groupの挙動にあまり詳しくなく、実現方法が見当もつかないので、ご助力いただけるとありがたいです。
実現可能であればreact-transition-groupでなくても全く問題ありません。

よろしくお願いします。