CSS transition not working in nextjs

[vishnu-sagubandi]

I am using NextJS with tailwind css and react18 and this is my code, and it is not adding up css classes to children

import React,{useState,useEffect,useRef} from 'react';
import {FiChevronLeft, FiChevronRight} from 'react-icons/fi';
import { CSSTransition} from 'react-transition-group'

const LeadsFilter = (props) => {
    const [open,setOpen]=useState(false);
    const [activeMenu, setActiveMenu] = useState('main');
    const [menuHeight, setMenuHeight] = useState(null);

    const Menu = (props) => {
        return (
            <div className="flex flex-shrink-0 flex-col w-[12rem] h-fit bg-[#FFF] rounded select-none overflow-hidden">
                {props.children}
            </div>
        )
    }

    const NavItem = (props) => {
        return (
            <div className={"flex transition-colors duration-300 items-center w-full h-full p-3 text-[#1a1a1a]/[0.85] text-sm leading-[150%] hover:bg-[#005B98] hover:text-[#FAFAFA] cursor-pointer "+(props.type==="left"?"justify-start":"justify-between")} onClick={() => props.goToMenu && setActiveMenu(props.goToMenu)}>
                {props.type==="left"&&<FiChevronLeft className='text-lg'/>}
                {props.children}
                {!(props.type==="left")&&<FiChevronRight className='text-base'/>}
            </div>
        )
    }

    const DropdownMenu = () => {

        return (
            <div className="flex w-[12rem] h-fit absolute top-[2rem] right-0 z-50 bg-[#FFF] rounded select-none overflow-hidden" >
                <CSSTransition
                    in={activeMenu === 'main'}
                    timeout={500}
                    classNames="menu-primary"
                    onExit={()=>console.log("Exit")}
                    unmountOnExit
                    >
                        <div className='main'>
                            <Menu>
                                <NavItem goToMenu="datewise">Datewise</NavItem>
                                <NavItem goToMenu="status">Status</NavItem>
                                <NavItem goToMenu="source">Source</NavItem>
                            </Menu>
                        </div>
                </CSSTransition>
                <CSSTransition
                    in={activeMenu === 'datewise'}
                    timeout={500}
                    classNames="menu-secondary"
                    unmountOnExit
                    >
                        <div className='main'>
                    <Menu>
                        <NavItem goToMenu="main" type="left">Datewise</NavItem>
                        <NavItem>Sub NavItem 1</NavItem>
                        <NavItem>Sub NavItem 2</NavItem>
                        <NavItem>Sub NavItem 3</NavItem>
                    </Menu>
                    </div>
                </CSSTransition>
                <CSSTransition
                    in={activeMenu === 'status'}
                    timeout={500}
                    classNames="menu-secondary"
                    unmountOnExit>
                        <div className='main'>
                    <Menu>
                        <NavItem goToMenu="main" type="left">Status</NavItem>
                        <NavItem>Sub NavItem 1</NavItem>
                        <NavItem>Sub NavItem 2</NavItem>
                        <NavItem>Sub NavItem 3</NavItem>
                    </Menu>
                    </div>
                </CSSTransition>
                <CSSTransition
                    in={activeMenu === 'source'}
                    timeout={500}
                    classNames="menu-secondary"
                    unmountOnExit>
                        <div className='main'>
                    <Menu>
                        <NavItem goToMenu="main" type="left">Source</NavItem>
                        <NavItem>Sub NavItem 1</NavItem>
                        <NavItem>Sub NavItem 2</NavItem>
                        <NavItem>Sub NavItem 3</NavItem>
                    </Menu>
                    </div>
                </CSSTransition>
            </div>
        )
    }

    return (
        <div className="flex w-fit h-fit relative">
            <span onClick={()=>setOpen(!open)}>{React.Children.map(props.children,(child)=>{
                if(child.type?.name==="Title")return child;
            })}
            </span>
            {open && <DropdownMenu/>}
        </div>
    )
}

const Title = (props) => {
        return (
            <div className="flex w-fit h-fit">
                {props.children}
            </div>
        )
    }

LeadsFilter.Title=Title;

export default LeadsFilter;

Can anyone plz help me out??

[cheryl-c-tirerack]

I am having same exact issue. It doesn't even attempt to add the classes.

[stvmachine]

Is there any solution for this?