React "router-like" animations

Question

I have a sidebar sliding menu that should act like a Router with transitions, but based on my app's state (redux) instead of routes.

The first time the menu is opened the transitions works fine. But, when I change between two inner components of the menu, there's no animations.

Here's the code for the component:

const SidebarInnerPages = () => {
  const { selectedPage } = useSelector((state) => state.sidebarInnerPages)

  let inner = null
  if (selectedPage === "profile") {
    inner = <ProfilePage />
  } else if (selectedPage === "settings") {
    inner = <SettingsPage />
  } else if (selectedPage === "notifications") {
    inner = <NotificationsPage />
  }

  return (
    <CSSTransition
      in={!!selectedPage}
      unmountOnExit
      timeout={600}
      classNames={{ ...styles }}
    >
      <div className={styles.innerPagesContainer}>{inner}</div>
    </CSSTransition>
  )
}

So the first time the selectedPage is changed, the menu slides in just fine. But if I switch between SettingsPage and NotificationsPage, the latter just pops in instead of being animated.

I've tried wrapping the CSSTransition with TransitionGroup with no luck.

Any ideas how to go about it?

Thanks in advance :)