Почему элементы, которые отображаются на основе состояния и изменяются с помощью разбиения на страницы, не воспроизводят свою анимацию при изменении страницы в React?

Question

Я пытаюсь сделать так, чтобы, когда пользователь переходит со страницы на страницу, появляются новые результаты. Они исчезают при первом рендеринге, но при изменении страниц анимация не отображается. Я бы исключил элементы для рендеринга с нуля, чтобы анимация из первого рендеринга воспроизводилась снова. Думаю, я не совсем понимаю, как React отображает вещи, поэтому, пожалуйста, помогите понять это. Спасибо.

JSX

    const results = useSelector((state) => state.recipeResults);
    const dispatch = useDispatch();

    const [firstResult, setFirstResult] = useState(0);
    const [firstPage, setFirstPage] = useState(true);
    const [lastPage, setLastPage] = useState(false);


function renderResults() {
        if (results.length > 0) {
            let i = 0;
            let resultsToShow = [];

            while (i < 10 && i + firstResult < results.length) {
                resultsToShow.push(results[firstResult + i]);
                i++;
            }
            return resultsToShow.map((item, i) => {
                let img = `https://spoonacular.com/recipeImages/${item.id}-90x90.jpg`;
                const newTitle = limitRecipeTitle(item.title);
                return (
                    <li key={i}>
                        <button
                            recurl={item.sourceUrl}
                            // onClick={() => getDetails(item.sourceUrl)}
                            onClick={logFakeData}
                            className="results__link">
                            <div className="results__list-img-div">
                                <img src={img} alt={newTitle} />
                            </div>
                            <div className="results__data">
                                <h4 className="results__name">{newTitle}</h4>
                                <div className="results__detail">
                                    <p className="results__author">
                                        <span role="img" aria-label="time">
                                            ?
                                        </span>
                                        {'  '}
                                        {item.readyInMinutes}
                                        {'  '}m
                                    </p>
                                    <p className="results__author">Serves: {item.servings}</p>
                                </div>
                            </div>
                        </button>
                    </li>
                );
            });
        } else return <div>No results yet...</div>;
    }

    function nextPage() {
        let nextFirst = firstResult + 10;
        if (nextFirst > results.length - 11) setLastPage(true);
        setFirstPage(false);
        setFirstResult(nextFirst);
    }

    function prevPage() {
        setLastPage(false);
        let nextFirst = firstResult - 10;
        console.log('nextFirst:', nextFirst);
        console.log('results.length:', results.length);
        if (nextFirst <= 0) setFirstPage(true);
        setFirstResult(nextFirst);
    }

    function renderPageBtns() {
        if (results.length > 0) {
            return (
                <div className="pagination-div">
                    <button
                        onClick={prevPage}
                        className={
                            firstPage ? 'page-btn hidden-page-button' : 'page-btn prev'
                        }>
                        <span role="img" aria-label="prev">
                            ◀️
                        </span>
                    </button>{' '}
                    <button
                        onClick={nextPage}
                        className={
                            lastPage ? 'page-btn hidden-page-button' : 'page-btn next'
                        }>
                        <span role="img" aria-label="prev">
                            ▶️
                        </span>
                    </button>
                </div>
            );
        } else {
            return <div></div>;
        }
    }

    return (
        <div className="results">
            <ul className="results__list">{renderResults()}</ul>
            {renderPageBtns()}
        </div>
    );

CSS

    .results__link,
    .likes__link {
        background: white;
        margin-bottom: 1px;
        box-sizing: border-box;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0.1rem;
        align-items: center;
        transition: all 0.3s;
        text-decoration: none;
        cursor: pointer;
    }

    .results__link * {
        animation: BUTTONFADE 4s 1;
    }

    @keyframes BUTTONFADE {
        0% {
            opacity: 0.01;
        }
        100% {
            opacity: 1;
        }
    }