reactjs - React アニメーションと GSAP

Question

反応を使用して単純な TodoList を作成し、GSAP をプロジェクトに統合しようとしました。ここでは、制御されたアニメーションを作成するために状態を利用しました。

問題は

リストに Todo を追加すると、Todo は追加されますが、要素の不透明度は 0 に設定されます。

私が間違っているときは助けてください。

プロジェクト リンク

Todo.jsコンポーネント

import React, { useRef, useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { ToggleTodo } from "../actions";
import  {TimelineMax}  from "gsap/all";

const Todo = ({ todoInfo }) => {
  const dispatch = useDispatch();
  let todoRef = useRef(null);
  let [playState, setPlayState] = useState(true);
  const tl = new TimelineMax({ paused: true });

  useEffect(() => {
    tl.fromTo(
      todoRef,
      1,
      { opacity: 0 },
      { opacity: 1, y: "10px", onComplete: () => setPlayState(false) }
    );
    if (playState) tl.play();
  });
  return (
    <div
      className={`alert mb-2 text-white todoItem ${
        todoInfo.isCompleted ? "bg-success" : "bg-info"
        }`}
      onClick={() => dispatch(ToggleTodo(todoInfo.id))}
      ref={element => {
        todoRef = element;
      }}
    >
      {todoInfo.todoText}
      {todoInfo.isCompleted}
    </div>
  );
};

export default Todo;