Javascript 当道具使用样式化组件和反应过渡组更改时，如何应用高度过渡？

我有一个List.js组件，其中包含多个ListItem.js组件，并通过向活动ListItem传递一个prop

active

来监视每个ListItems状态。在活动状态下，我希望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;
  }
`

const ListItem=（{active}）=>{
返回(
内容
{活动&&(
{（状态）=>(
一些卷展栏内容
)}
)}
)
}
const Container=styled.div`
.推出{
过渡：最大高度为1s，易于进入；
}
.卷展栏输入{
最大高度：0；
溢出：隐藏；
}
。卷展栏已输入{
最大高度：1000px；
}
`