classNames gets removed when state changes

[baburay23]

What is the current behavior?
when the drawer is opened and the Toggle theme button is clicked the theme changes however the drawer immediately closes.
I noticed that the <CSSTransition classnames /> actually gets removed when the toggle button is clicked.
Below is an example of the drawer component we built and i have also shown a working example of the Drawer component with the unexpected behaviour in sandbox https://codesandbox.io/s/drawer-g1hloq?file=/src/App.tsx

  {handleCloseButtonClick => (
        <CSSTransition
          in={open}
          timeout={getTransitionDuration(
            `${drawerPath}.panel.${placement}`,
            '',
          )({theme, overrides})}
          classNames="nk-drawer"
          appear
        >
          <StyledDrawer
            aria-hidden={!open}
            open={open}
            disableFocusTrap={disableFocusTrap}
            handleCloseButtonClick={handleCloseButtonClick}
            path={drawerPath}
            data-testid={drawerPath}
            placement={placement}
            closePosition={closePosition}
            overrides={overrides}
            ref={drawerRef}
            inline={inline}
            {...props}
          >
            {children}
          </StyledDrawer>
        </CSSTransition>

What is the expected behaviour?
The className on CSSTransiton should not be removed when state is updated. I think that should fix my problem of the drawer closing on toggle.
Any help is really appreciated and sorry in advance if i am missing something really obvious

Could you provide a CodeSandbox demo reproducing the bug?
sandbox example here https://codesandbox.io/s/drawer-g1hloq?file=/src/App.tsx

[StijnKlarenbeek]

Still experiencing this in the latest version