Компонент, не размонтированный с реакционно-переходной группой и стилизованными компонентами

Question

У меня есть компонент, который оживляет с react-transition-group вот так:

import { CSSTransition } from 'react-transition-group';

//....
const popoverWindow = 'popover-window'

<CSSTransition
  in={popoverVisible}
  classNames={popoverWindow}
  unmountOnExit
>
  <PopoverWindow
    popoverEdit={popoverEdit}
    saved={isSaved(apiSaved)}
    emailLoading={emailLoading}
    emailView={emailView}
    key={popoverWindow}
  >

//....


const PopoverWindow = styled.div` // styled-component
  &.${popoverWindow}-enter {
    opacity: 0.01;
    transform: scale(0.9) translateY(50%);
  }

  &.${popoverWindow}-enter-active {
    opacity: 1;
    transform: scale(1) translateY(0%);
    transition: all 300ms ease-out;
  }
  &.${popoverWindow}-exit {
    opacity: 1;
    transform: scale(1) translateY(0%);
  }

  &.${popoverWindow}-exit-active {
    opacity: 0;
    transform: scale(0.9) translateY(50%);
    transition: all 300ms ease-out;
  }
`

Хотя анимация, кажется, работает, она не отключается даже при использовании открытой unmountOnExit, Я также пытался установить unmountOnExit={true} но это также не похоже на работу.

Наконец я попробовал

&.${popoverWindow}-exit-active {
    opacity: 0;
    display: none; // added this
    transform: scale(0.9) translateY(50%);
    transition: all 300ms ease-out;
  }

Но это также, кажется, ломает волнующую анимацию.

Независимо от того, что я пытаюсь, компонент все еще остается в DOM с классом -exit-active застрял там. Кто-нибудь имеет какие-либо идеи о том, как удалить этот компонент из DOM через размонтирование, а также его анимацию?