Сохранение стиля флексбокса при использовании компонентов более высокого порядка, таких как реакция-раскрытие

Я использую flexbox с styled-components для компоновки и размера элементов в моем приложении. Я хочу добавить анимацию раскрытия и использую модуль react-reveal. По документации предполагается, что со стилями-компонентами «из коробки» будет работать.

Проблема в том, что HOC оборачивает дополнительный div вокруг внутреннего компонента, который нарушает отношения «родитель-> потомок» flexbox.

Вот как я добавляю анимацию.

const Card = styled.div`
   /* style */
   min-height: 400px;
   min-width: 100px;
   max-width: 400px;
   background-color: white;

   /* flex */
   display: flex;
   flex-basis: 25%;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
`;

/* apply fade in animation */
const Card = withReveal(card, <Fade bottom />)

Этот div является одним из трех div внутри содержащего div, который выглядит как

const InnerContainer = styled.div`
   width: 80%;
   max-width: 1200px;
   padding: 100px;

   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
`

Без применения анимации этот макет работает правильно, но когда я использую HOC withReveal, он оборачивает другой div вокруг компонента карты, что нарушает гибкий макет.

Я пробовал использовать другие модули анимации, но этот метод использования компонента HOC используется почти во всех модулях анимации или стиля reactjs.

Я попытался обернуть компонент HOC в styled() и добавить display: contents, чтобы попытаться передать CSS детям, но это, похоже, еще больше испортило макет.