nested CSSTransition doesn't receive enter and enter-active and other classes on first mount

Question

I have a CSSTransition component and inside it I have nested another one. my problem is that I want to set unmountOnExit on the outer CSSTransition and it causes to nested CSSTransition not to receive enter active and other predefined classes.

return (
    <CSSTransition
      in={sidebarCtx.isOpen}
      timeout={500}
      classNames="sidebar"
      unmountOnExit // If I remove this line everything works fine but i want to unmount this element 
      mountOnEnter
    >
      <div className="sidebar">
        <div className={sidebarContentContainer}>
          <CSSTransition
            in={sidebarCtx.isOpen}
            timeout={500}
            classNames="sidebar-content"
            mountOnEnter
            unmountOnExit
          >
            <ul className="sidebar-content"> //this ul doesn't receive enter and active classes 
              {data.map((item) => {
                return (
                  <li key={item.title} className="flex gap-4 items-center">
                    <span>{item.icon}</span>
                    <a href={item.path}>{item.title}</a>
                  </li>
                );
              })}
            </ul>
          </CSSTransition>
        </div>
      </div>
    </CSSTransition>
  );

if I increase the timeout on the first CSSTransition then after the component mount and stay in the DOM the second IN prop changes, the ul element receive the classes.