need help with applying transition to out

function App() {
  const { location } = useRouterState();
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <GlobalStyles
        styles={{ html: { fontSize: "62.5%" }, body: { overflowX: "hidden" } }}
      />
      <SwitchTransition>
        <CSSTransition key={location.pathname} timeout={300} classNames="page">
          <Outlet />
        </CSSTransition>
      </SwitchTransition>
      <Suspense
        fallback={<Typography>Tanstack router devtools are loading</Typography>}
      >
        <TanStackRouterDevtools position="bottom-right" />
      </Suspense>
    </ThemeProvider>
  );
}

.page-enter {
    opacity: 0;
}

.page-enter-active {
    opacity: 1;
    transition: opacity 200ms;
}

.page-exit {
    opacity: 1;
}

.page-exit-active {
    opacity: 0;
    transition: opacity 200ms;
}