Css 如何使用CSTransition延迟渲染数组中的每个项？

我有一个项目数组，当项目出现在DOM上时，我希望延迟渲染每个项目。目前，所有项目都是同时渲染的。这是我的密码：

  <TransitionGroup className="portfolioItems" component={Container}>
    {portfolio &&
      portfolioItems.map(({ id, url }) => (
        <CSSTransition classNames="portfolioItems" timeout={5000} key={id}>
          <Segment rised style={{ padding: 0, margin: 25 }}>
            <Image src={url} rounded />
          </Segment>
        </CSSTransition>
      ))}
  </TransitionGroup>

.portfolioItems-enter {
  opacity: 0;
  transform: translateY(50%) scale(0.7, 0.7);
}
.portfolioItems-enter-active {
  opacity: 1;
  transform: translateY(0%) scale(1, 1);
  transition: 3s all ease-in-out
}