React-transition-group has no effect running animations in Next.js 14.2.3 App Router

[youjia727]

'use client';

import { usePathname } from "next/navigation";
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import classNames from "classnames";
import './index.scss';

export default function Translation({ children }: { children: React.ReactNode }) {

const pathname = usePathname();
const router = useCustomRouter();

return (
<>
<div style={{ height: pathname === '/login' ? 396 : 415 }} className="animation">
<TransitionGroup className={classNames('transition')}>

{children} // This is the route



</>
)
}

index.scss

.animation {
position: relative;
overflow: hidden;
transition: height 400ms ease;
}

.transition>* {
top: 0;
left: 0;
width: 100%;
position: absolute;
}

.page-transition-enter,
.page-transition-appear {
transform: translateX(100%);
transition: none;
}

.return .page-transition-enter,
.return .page-transition-appear {
transform: translateX(-100%);
}

.page-transition-enter-active,
.page-transition-appear-active {
transform: translateX(0%) !important;
transition: all 400ms cubic-bezier(0.25, 0, 0, 1);
}

.page-transition-exit {
transform: translateX(0);
transition: none;
}

.page-transition-exit-active {
transform: translateX(-100%);
transition: all 400ms cubic-bezier(0.25, 0, 0, 1);
}

.return .page-transition-exit-active {
transform: translateX(100%);
transition: all 400ms cubic-bezier(0.25, 0, 0, 1);
}
}

Run the code above to see the results，Can you see if there's a configuration wrong？