Как применить переход по высоте при смене реквизита с помощью Styled-Components и React Transition Group?

Question

У меня есть компонент List. js, который имеет несколько компонентов ListItem. js внутри него и контролирует каждый статус ListItems, передавая реквизит active активному ListItem. На активном я хочу, чтобы ListItem отображал дополнительный div, который не будет отображаться без активного состояния. Это работает нормально, но я хочу добавить анимацию для скольжения нового содержимого при рендеринге, и я изо всех сил пытаюсь добиться перехода к работе.

Кто-нибудь может помочь? ListItem. js код ниже

const ListItem = ({active}) => {
  return (
     <Container>
      <div>content</div>
      {active && (
          <Transition appear timeout={300} in={active}>
            {(status) => (
              <div className={`rollout rollout-${status}`}>
                 <div>some rollout content</div>
              </div>
           )}
      )}
     </Container>
   )
}

const Container = styled.div`
  .rollout {
    transition: max-height 1s ease-in;
  }

  .rollout-enter {
    max-height: 0;
    overflow: hidden;
  }

  .rollout-entered {
    max-height: 1000px;
  }
`