En la aplicación para reaccionar con la transición CSS mecanografiada no funciona en absoluto

Actualmente estoy tratando de agregar al menos animaciones de entrada/salida para que cada una haga, si hago que esto funcione, el descanso debería ser más fácil

También usando Basic redux con todolist aquí

Aquí está mi código

 Todo: const Todo: React.FC<Props> = forwardRef((props) => { useEffect(() => { console.log(props.ref); }); return ( <CSSTransition<undefined> addEndListener={(node: HTMLElement, done: () => void) => { node.addEventListener("transitionend", done, false); }} className="Todo" timeout={1000} appear={true} > <div> <span>{props.index + 1}</span> <span>{props.todo.name}</span> <span>{props.todo.details}</span> {props.todo.complete ? ( <span>Done</span> ) : ( <span>Active</span> )} <button onClick={() => props.Delete(props.todo.id)}> Delete </button> <button onClick={() => props.Done(props.todo.id)}> Done </button> </div> </CSSTransition> ); }); css: .TodoContainer { width: 100%; position: relative; padding: 0; } .TodoNew { width: 100%; height: 50px; border-top: 0; border-left: 0; border-right: 0; margin-bottom: 10px; border-bottom-color: #AEAEAE; opacity: 0.3; border-bottom-width: 1px; outline: none; padding-bottom: 0; } .Todo { background-color: #fff; display: flex; flex-direction: row; width: 100%; height: 50px; align-items: center; justify-content: space-between; padding: 10px; } .Todo-appear { opacity: 0; } .Todo-appear-active { opacity: 1; transition: opacity 1000ms; } .Todo-enter { opacity: 0; } .Todo-enter-active { opacity: 1; transition: opacity 200ms; } .Todo-exit { opacity: 1; } .Todo-exit-active { opacity: 0; transition: opacity 200ms; } Parent component: <TransitionGroup component="div" className="TodoContainer"> { props.todoList ? props.todoList.map((todo, index) => { return( <> <Todo todo={todo} key={todo.id} index={index} Delete={props.DeleteTodo} Done={props.DoneTodo} /> </> ) }) : <></> } </TransitionGroup>

StackOverflow rompió mi sangría aquí ((

como se hace aqui??