React CSSTransition doesn't show animation

Question

I'm trying to add animation to a list of items when they are received from external api. I want to add a pause in 100ms. between appearing each of them.

Here is a snippet of my Component

*** I make a request in useEffect(() => {..request to external api...}, []) to get list of items. And then I add nodeRef with createRef to the each of item. I can't use useRef because of map.

import { CSSTransition, TransitionGroup } from 'react-transition-group';

const CharList = (props) => {

    const onCharLoaded = async (newChars) => {
        newChars = newChars.map(char => ({...char, nodeRef: createRef(null)}))

        setChars(chars => [...chars, ...newChars]);
    }

    function renderItems(arr) {
        let duration = 0;

        const items = arr.map((item, i) => {
            duration = duration === 0 ? 300 : duration + 100

            return (
                <CSSTransition
                    key={item.id}
                    timeout={duration}
                    nodeRef={item.nodeRef}
                    classNames="item">
                    <li
                        className="char__item"
                        tabIndex={0}
                        key={item.id}
                        ref={item.nodeRef}
                        onClick={(e) => {
                            props.onCharSelected(item.id);
                            focusOnItem(item.nodeRef);
                        }}
                        onKeyDown={(e) => {
                            if (e.key === " " || e.key === "Enter") {
                                props.onCharSelected(item.id);
                                focusOnItem(item.nodeRef);
                            }
                        }}>

                        <img src={item.thumbnail} alt={item.name} />
                        <div className="char__name">{item.name}</div>
                    </li>
                </CSSTransition>
            );
        });

        return (
            <ul>
                <TransitionGroup
                    className="char__grid">
                    {items}
                </TransitionGroup>
            </ul>
        )
    }

and CSS

.item-enter {
    opacity: 0;
}

.item-enter-active {
    opacity: 1;
    visibility: visible;
    transition: all 300ms;
}

.item-enter-done {
    opacity: 1;
    visibility: visible;
}

.item-exit {
    opacity: 1;
}

.item-exit-active {
    opacity: 0;
    visibility: hidden;
    transition: all 300ms;
}

It seems I did everything what was written in docs. But my anymation is not working.

Answer 1

function 'renderItems' is declared but it is never use.