Navigating through video's upon mouse scroll anywhere on the page

I need your help: I'm creating a React App with a 'featured' page(homepage), where I use a Vimeo API to fetch video's from Vimeo into the project. That works fine. I use an automatic loop so the video's will keep playing. I have also a circular progress slider build in, which displays the title of the content and the remaining time of the video.

So far so good, but here comes my issue: I'd like to be able to scroll up or down anywhere on the page, which triggers to go to the next or previous video. I tried a few things, but nothing worked. I think I need a wheel listener for this, but I don't know how to combine it with the code I already have. Can anyone tell me what's the best way of dealing with this and at where in my code I have to embed the scroll (or wheel?) event? A good example is this web page: www.division.global/ (not my website, but they dó have what i'd like to build myself) - scroll up or down and you'll see what I mean.

Please see my code below:

//Featured.js//
export default function Featured() {
const [current, setCurrent] = useState(0);
const [featureData, setFeatureData] = useState([]);
const [progress, setProgress] = useState(0);

useEffect(() => {
    fetch("http://localhost:3001/featured")
        .then((response) => response.json())
        .then((featureData) => {
            setFeatureData(featureData);
        })
        .catch((error) => {
            console.log(error.message);
        });
    return [];
}, []);

useEffect(() => {
    const interval = setInterval(() => {
        setProgress(progress + 1);
        if ((progress + 1) % 100 === 0) {
            setCurrent(current === featureData.length - 1 ? 0 : current + 1);
        }
    }, 100);
    return () => clearInterval(interval);
});

return (
    <section id="featured">
        {featureData.map((video, index) => {
            let url =
                "https://player.vimeo.com" + video.uri.replace("/videos/", "/video/");
            return (
                <div
                    key={index}
                    className={`featured-item ${index === current ? "active" : ""}`}
                >
                    <ReactPlayer
                        width='1440px'
                        height='1024px'
                        url={url}
                        config={{
                            vimeo: {
                                playerOptions: {
                                    background: true,
                                    quality: "720p",
                                    dnt: true,
                                    loop: true,
                                    playsInline: true,
                                },
                            },
                        }}
                    />
                </div>
            );
        })}
        {featureData.map((card, index) => {
            return (
                <Card
                    title={card.name}
                    active={index === current}
                    key={index}
                    progress={progress}
                />
            );
        })}
    </section>
);

}

//Card.js - component circular progress slider//

export default function Card({ active, title, progress }) {
return (
    <div className={`card ${active ? 'active' : ''}`}>

        <CircularProgress
            variant="determinate"
            value={progress}
            size={100}
            thickness={3}
        />
        <h3>{title}</h3>
    </div>
)

}