Как вы анимируете mount/unmount компонентов в react?

Question

[Павел Антонов]

Использую styled-components, но вопрос актуален и для обычных компонентов т.к не сильно отличаются принципы использования компонентов.
Ищу адекватный способ анимировать появление и исчезание компонентов в DOM, подскажите кто чем пользуется?

Сам я пока остановился на styled-transition-group

На примере простого Modal покажу как я это использую (Spoiler с кодом)

// Modal.jsx
import React from 'react';

import {
    Modal as StyledModal
} from './styled';

/** Модальное окно */
export const Modal = ({
  open = false
} = {}) => (
  <StyledModal unmountOnExit in={open} timeout={300}>
    {children}
  </StyledModal>
)

// styled.jsx
import transition from 'styled-transition-group';

export const Modal = transition.div`
  display: flex;
  align-items: center;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 765px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  transform: translateX(-50%) translateY(-50%) perspective(600px) rotateX(0);
  padding: 45px 70px;
  transition: all 0.3s ease;
  z-index: 1110;
  line-height: normal;
  &:enter {
    opacity: 0;
    transform: translateX(-50%) translateY(-70%) perspective(600px) rotateX(10deg);
  }
  &:enter-active {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) perspective(600px) rotateX(0);
  }
  &:exit {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) perspective(600px) rotateX(0);
  }
  &:exit-active {
    opacity: 0;
    transform: translateX(-50%) translateY(-70%) perspective(600px) rotateX(10deg);
  }
`;

В принципе все устраивает, но как всегда есть минусы.
Мы используем обертку, которую назвали Showable

Код Showable.jsx

// Showable.jsx
import React from 'react';

const Showable = WrappedComponent => class extends React.PureComponent {
    render() {
      const { isShow } = this.props;
      if (!isShow) {
        return null;
      }
      return (
        <WrappedComponent
          {...this.props}
        />
      );
    }
};

export default Showable;

Если компонент обернуть в HOC, то почему-то перестает анимироваться mount и unmount. Впринципе ясно почему, Showable возвращает null если компонент не нужен на странице, но когда компонент нужен Showable становится true компонент появляется, но без анимации.