How to have animated transitions on two different axis using React Router V6 and TransitionGroup?

Question

I have a layout like this one.

+----------+----------+----------+----------+
| HOMEPAGE | PAGE-X-1 | PAGE-X-2 | PAGE-X-3 |
+----------+----------+----------+----------+
| PAGE-Y-1 |
+----------+
| PAGE-Y-2 |
+----------+
| PAGE-Y-3 |
+----------+

Every page is full-sized in the viewport (100vw and 100vh)

Using React Router V6,

I would like to build animated transitions when going to a page; on two axis :

• /page/x/1, /page/x/2 and /page/x/3 would have an horizontal transition
• /page/y/1, /page/y/2 and /page/y/3 would have a vertical transition
• return to the homepage would depend on the "current" axis (from /page/x/..., it would be an horizontal transiton, from /page/y/..., it would be a vertical transition).

I've started digging in TransitionGroup and CSSTransition based looking at this Animated Routes Demo, but my case is quite different since I have two transitions axis.

Here's what I have so far:

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

  return (
    <div className="App">
      <TransitionGroup component={null}>
        <CSSTransition key={location.key} classNames="fade" timeout={300}>
          <Routes location={location}>
            <Route path="/x/1" element={<PageX1/>} />
            <Route path="/x/2" element={<PageX2/>} />
            <Route path="/x/3" element={<PageX3/>} />
            <Route path="*" element={<HomePage />} />
          </Routes>
        </CSSTransition>
      </TransitionGroup>
    </div>
  );
}

How could I achieve this ?

Thanks a lot !