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