Overlapping images animation effect while scrolling

I got inspired to create this animation effect. What I want to achieve is that the overlapped images get a little bigger when scrolling down and then again smaller when I scroll back.

For the scrolling part I know I need to use Intersection Observer API. I think I managed it to do right but I cant get it to work. I use React Typescript with inline styling.

The original animation - Three overlaping images - getting bigger on scroll down:

Codepen

My React Code - OverlappingImages.tsx :

import React from 'react';

const styles = {
    container: {
        position: 'relative',
        height: '400px',
        margin: '0 50px',

        div: {
            width: '380px',
            border: '1px solid #000',
            overflow: 'hidden',
            lineHeight: 0,
            transition: 'transform .4s ease-in-out',

            img: {
                width: '100%',
                fontSize: 0,
            },
        },

        img1: {
            left: '5%',
            top: 0,
            position: 'absolute',
            transform: 'rotate(-4deg) translateY(20%)',
            transitionDelay: '0s',
        },

        img2: {
            left: '50%',
            top: 0,
            position: 'absolute',
            transform: 'translate(-50%, 0)',
            transitionDelay: '.1s',
            zIndex: 1,
        },

        img3: {
            right: '5%',
            top: 0,
            position: 'absolute',
            transform: 'rotate(4deg) translateY(20%)',
            transitionDelay: '.2s',
        },

        ' &.active': {
            img1: {
                transform: 'rotate(-6deg) translateY(50%) scale(1.9)',
            },

            img2: {
                transform: 'translate(-50%, -2%) scale(1.2)',
            },

            img3: {
                transform: 'rotate(6deg) translateY(24%) scale(1.2)',
            },
        },
    },

    body: {
        fontFamily: 'sans-serif',
        fontSize: '48px',
        fontWeight: 'bold',
        letterSpacing: '1px',
        margin: 0,
    },

    section: {
        textAlign: 'center',
        padding: '500px 0',

        '&:nth-child(odd)': {
            background: '#eee',
        },
    },
};

function OverlappingImages() {
    const wrapper = document.querySelector('.container');
    const className = 'active';

    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    wrapper.classList.add(className);
                    return;
                }

                wrapper.classList.remove(className);
            });
        },
        {
            threshold: 1,
        }
    );

    observer.observe(wrapper);

    return (
        <>
            <section>
                <p>(scroll down!)</p>
            </section>
            <section>
                <div style={styles.container}>
                    <div style={styles.container.img1}>
                        <img src="https://via.placeholder.com/350x250" alt="img1" />
                    </div>
                    <div style={styles.container.img2}>
                        <img src="https://via.placeholder.com/350x250" alt="img2" />
                    </div>
                    <div style={styles.container.img3}>
                        <img src="https://via.placeholder.com/350x250" alt="img3" />
                    </div>
                </div>
            </section>
            <section>
                <p>(scroll up!)</p>
            </section>
        </>
    );
}

export { OverlappingImages };

from Overlapping images animation effect while scrolling