How to make delay for each element in React TransitionGroup?

Question

React

I'm trying to make an animation using ReactTransitionGroup, I want to achieve the effect that the elements appear (pop up) one after another, but it turns out that they appear all together

function Menu(props) {
  useEffect(() => {
    props.getMenuList()
  }, [props.getMenuList])

  return (
    <div className="row container-fluid mx-0" id="menu">
      <TransitionGroup component={null}>
        {
          props.menu.map(pizza =>
            <CSSTransition
              key={pizza._id}
              timeout={300}
              classNames="menuItem">
              <Pizza pizzaData={pizza}/>
            </CSSTransition>
          )
        }
      </TransitionGroup>
    </div>
  )
}

Pizza.js:

<div className="col-3 mt-3">
    <div className="container-fluid pizza p-0">
     ...
    </div>
 </div>

CSS:

.menuItem-enter, .menuItem-appear {
    opacity: 0;
    transform: translateY(30%);
 }
.menuItem-enter-active, .menuItem-appear-active {
   opacity: 1;
   transform: translateY(0%);
   transition: opacity 300ms, transform 300ms;
}

I also tried to manually set a different delay for each element, but it did not help. How to achieve the desired effect?

Answer 1

what is timeout, delay before animation?

props.menu.map(pizza =>
            <CSSTransition
              key={pizza._id}
              timeout={300}   // это задержка?

props.menu.map((pizza, index) =>
            <CSSTransition
              key={pizza._id}
              timeout={300 * index}   // тогда можно попробовать так