How to apply height transition when props change using Styled-Components and React Transition Group?

Question

I have a List.js component that has multiple ListItem.js components inside it and monitors each ListItems status by passing a prop active to the active ListItem. On active I want the ListItem to display an extra div that wouldn't be displayed without active state. That is working fine but I want to add an animation to slide the new content down on render and am struggling to get the transition to work.

Can anyone help? ListItem.js code below

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;
  }
`