scroll event and responsiveness in react - reactjs

Question

i'm trying to somewhat replicate this parallax feature that i found on the website https://spacers.wannathis.one/ (scroll to "12 different poses" section) with React. Here's an example of my code so far:
const App = () => {
const [scrollX, setScrollX] = useState(0);
const [scrollY, setScrollY] = useState(0);
const [marginTop, setMarginTop] = useState();
const [position, setPosition] = useState("static");
const [top, setTop] = useState();
const [left, setLeft] = useState();
useEffect(() => {
const handleScroll = (event) => {
setScrollY(Math.round(window.scrollY));
if (window.scrollY > 2070 && window.scrollY < 6112) {
setMarginTop(0 + "px");
setLeft((-window.scrollY +2525) * 0.55 + "px");
setPosition("fixed");
setTop(window.scrollY * 0.005 + "px");
}
if (window.scrollY <= 2070) {
setPosition("initial");
}
if (window.scrollY >= 6112) {
setPosition("absolute");
}
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return (
<div className="page">
<section className="title_wrapper">
<h3>My projects</h3>
</section>
<section
className="scroll_wrapper"
style={{
marginTop: marginTop,
position: position,
top: top,
left: left,
}}
>
<div className="images_wrapper">
<div className="images_container">
<img src={pic1} />
</div>
<div className="images_container">
<img src={pic2} />
</div>
</div>
</section>
</div>
CSS:
.page {
width: 100vw;
overflow: auto
height: 100vw
display: flex
align-items: center;
position: relative
.title_wrapper {
position: absolute;
display: flex;
.scroll_wrapper {
margin-left: 0px;
display: flex;
overflow: hidden;
width: auto;
justify-content: flex-start;
align-items: center;
z-index: 10;
vertical-align: middle;
margin-top: 0px;
}
.images_wrapper {
overflow-x: hidden;
display: flex;
width: 100%;
align-items: center;
gap: 30px;
max-height: 100vh;
position: absolute;
vertical-align: middle;
top: 10px;
white-space: nowrap;
flex-direction: row;
flex-wrap: nowrap;
left: 100px;
}
h3 {
z-index: 10;
position: absolute;
top: 0;
left: 10px;
}
.image_container {
max-width: 10vw;
width: 10vw;
}
img {
width: 100%;
height: auto;
}
The scroll effect seems to be working fine but whenever i resize the window everything breaks and i'm guessing it might be because the scrollY value should get smaller as the window resizes. I have no idea how to fix it, can somebody help?