GSAP第一个时间轴元素不补间

Question

我想在React应用程序中以0秒的绝对时间对DOM元素数组与GSAP 3进行补间。我正在动态添加元素refs中的元素。但是，第一个元素似乎直接“跳转”到{x:100}，而随后的元素正确地补间。有指针吗？

export const EditorCanvas = (props) => {
  const [{ shapes, stage }, dispatch] = useContext(CanvasContext);
  const layerRef = useRef(null)
  const content = useRef(null)


  const [toggle, setToggle] = useState(false);
  const [tl] = useState(new TimelineLite({paused: true}));


  const elementsRef = shapes.map(() => createRef());

  useEffect(() => {
      tl
      .add(shapes.map((shape, idx) => tl.to(elementsRef[idx].current,{ x: 100}, 0)))
   }, [shapes])

  return (
    <div className="editor-canvas">
      <button className="btn btn-info" onClick={() => tl.play()}>Play</button> 
      <div ref={content} className="stage">
      {
        shapes.map((shape, idx )=> (
          renderElement(shape, dispatch, stage, elementsRef[idx], idx)    
        ))
      }  
      </div>
    </div>
  );
}