React + Spring - feels laggy

Question

My page which downloads and displays data from API does Spring animations and they are really laggy. It is quite ok when there are like 1-5 items (but still choppy) and when there are like 20-30 items it's just horrible.

This is my component which animates:

const FadeInSpring = ({ children, del }) => {
    return (
        <Spring from={{ opacity: 0, marginTop: 100 }} to={{ opacity: 1, marginTop: 0 }} config={{ delay: del }}>
            {(props) => <animated.div style={props}>{children}</animated.div>}
        </Spring>
    );
};

And this is card I animate:

<section className="row justify-content-center p-1">
    <article className="col-12 col-md-5">
        <div className="card shadow">
            <div className="card-body">
                <h2 className="card-title">Ingredients:</h2>
                <p>{item.strIngredient1}</p>
            </div>
        </div>
    </article>
</section>;

Everything together just looks like this:

<FadeInSpring>
    <HeaderCard/>
</FadeInSpring>

Am I doing something wrong?

EDIT: Adding the link so you can see it yourself. Maybe you will notice the problem. https://ablaszkiewicz.github.io/react-portfolio/#/recipes