In todo react app with typescript CSS transition is not working at all

I am curretly trying to add at least enter/exit animations for each to do, if i will get this working, rest should be easier

Also using Basic redux with todolist here

Here is my code

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 broke my indentation here ((

How to be done here??