How to animate several elements inside a react jsx element using TransitionGroup?

Question

I have problems with understanding how to animate several elements using TransitionGroup. I have two sections I want to animate, each 50% in width on a page. My example only animates the first section (section-one) in my React.JSX.Element but I would like to have both section-one and section-two being animated in the same fashion.

Here is my example:

App.js

import { Routes, Route, useLocation } from "react-router-dom";
import { Contact } from "./components/Contact";
import { Education } from "./components/Education";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import './App.css';

const App = () => {
const location = useLocation()

return (
  <div className="App">
    <main>
      <TransitionGroup>
        <CSSTransition key={location.pathname} classNames="fade" timeout={300}>
          <Routes location={location}>
            <Route path="/" element={<Contact />} />
            <Route path="/education" element={<Education />} />
          </Routes>
        </CSSTransition>
      </TransitionGroup>
    </main>
  </div>
);
};

export default App;

Contact.js

export const Contact = () => {
    <>
      <section className="section-one">
            <div className="section-step-title">
              What is the contact info?
            </div>
      </section>
      <section className="section-two">
        <h2>Section Two</h2>
        <p>This is the content for section two.</p>
        </section>
    </>
  );
};

Education.js

  export const Education = () => {
    <>
      <section className="section-one">
            <a className="navbar-brand d-lg-none" href="#">
                <img src="logo.png" height="100" alt=""/>
            </a>
            <div className="section-step-title">
              Which Education you need?
            </div>
      </section>
      <section className="section-two">
        
      </section>
    </>
  );
};

App.css

.App {
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

main div {
  display: flex;
  align-items: flex-start;
  width: 100vw; /* Full viewport width */
}

section {
  padding: 20px;
  height: 100vh; /* Full viewport height */
}

.section-one {
  width: 50%;
  text-align: left;
  padding-left: 6em;
  padding-top: 4em;
  background-color: #2F3D50;
}

.section-two {
  width: 50%;
  background-color: black;
  color: white;
}

/* 
The following class-endings: *-enter, *-enter-active, *-exit, *-exit-active,
have very specific meanings to <CSSTransition />
(see more: https://reactcommunity.org/react-transition-group/css-transition)
*/

.fade-enter {
  opacity: 0;
  transform: translate(0, 0px);
  z-index: 1;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transform: translate(0, 0);

  transition: opacity 500ms ease-out, transform 900ms ease;
}
.fade-exit {
  opacity: 1;
  transform: translate(0, 0);
}
.fade-exit.fade-exit-active {
  opacity: 0;
  transform: translate(0, 0px);

  transition: opacity 500ms ease-out, transform 900ms ease;
}