Wrapper of RellaxJS not working in Reactjs - html

Question

I want my layers to follow the scroll when I see the components containing those layers.
I see in rellaxjs there is a wrapper and I use it but when I look at the element ,I see that translate3d doesn't change and is always transform: translate3d(0px, 0px, 0px) translate3d(0px, 0px, 0px);
i have wrapped the layers i need in the wrapper class i want but its not working. below is my code
if i don't use wrapper, my layers will take the menu bar or top:0 as the root. I only want it will take components containing those layers as a root.
<Row>
<Col className={`${styles.bottomDiscover}`}>
<div className={`${styles.wrapper} check`}>
<div className={`${styles.laptop} rellax`} data-rellax-speed="2">
<Image
alt=""
src={'/images/macbook.png'}
width={887.46}
height={524.55}
objectFit="contain"
/>
</div>
<div className={`${styles.cal} rellax`} data-rellax-speed="2">
<Image
alt=""
src={'/images/cal.png'}
width={350}
height={300}
objectFit="contain"
/>
<div className={styles.calArrow}>
<img src="/images/arrowleft.svg" alt="" className={styles.imgCalArrowLeft} />
<img
src="/images/arrowright.svg"
alt=""
className={styles.imgCalArrowLeftMobile}
/>
</div>
</div>
<div className={`${styles.sel} rellax`} data-rellax-speed="2">
<Image
alt=""
src={'/images/sel.png'}
width={350}
height={300}
objectFit="contain"
/>
</div>
<div className={`${styles.stock} rellax`} data-rellax-speed="2">
<Image
alt=""
src={'/images/stock.png'}
width={300}
height={200}
objectFit="contain"
/>
</div>
<div className={`${styles.phone} rellax`} data-rellax-speed="2">
<Image
alt=""
src={'/images/iphone.png'}
width={250}
height={500}
objectFit="contain"
/>
<div className={styles.calArrow}>
<img src="/images/Component 2.svg" alt="" className={styles.imgCalArrowRight} />
<img
src="/images/Component 4.svg"
alt=""
className={styles.imgCalArrowRightMobile}
/>
</div>
</div>
</div>
</Col>
</Row>
useEffect(() => {
new Rellax('.rellax', {
wrapper: '.check',
});
}, []);