I had successfully implemented parallex effect and it’s working well but scrolling the content of hero section jumps up and down, and on fast scroll there is to much jumping of hero content.

here is reference website: https://swtchenergy.com/

Here is my code I’m working in react js

 
const Homepage = () => {

   
    const overlayRef = useRef(null);
    const heroContentRef = useRef(null);

    useEffect(() => {
        const parallaxEffect = () => {
            const scrolled = window.scrollY;
            const parallax = document.querySelector('.parallax-bg');
            const heroContent = heroContentRef.current;
            if (window.innerWidth > 1000) {

                if (parallax) {
                    parallax.style.backgroundPositionY = `-${scrolled * 0.3}px`; // Adjusts slower parallax scrolling
                }
                if (heroContent) {
                    heroContent.style.transform = `translateY(${scrolled * 0.4}px)`; // Adjusts slower scrolling for hero content
                }
            }

        };

        window.addEventListener('scroll', parallaxEffect);

        return () => {
            window.removeEventListener('scroll', parallaxEffect);
        };
    }, []);

    return (
        <>
            <section className="customheight relative parallax-bg lg:bg-fixed bg-cover p-[7%] "
                style={{ backgroundImage: "url(/images/pages/homepage/herosection.svg)", backgroundRepeat: "no-repeat" }}>
                <div className='absolute inset-0 bg-black opacity-50'></div>
                <div ref={overlayRef} className='absolute hidden inset-0 bg-black opacity-0 transition-opacity duration-300 z-20'></div>
                <div ref={heroContentRef} className="relative z-10 flex flex-col items-start justify-center herohomlg:justify-end h-full text-white pb-0 lg:pb-[30px]">
                    <h1 className="text-left text-[1.2rem] sm:text-[1.3rem] herohommd:text-[2rem] herohomlg:text-[3rem] leading-[1.2em] font-semibold">THE #1 SOURCE FOR</h1>
                    <h1 className="text-left text-[3rem] sm:text-[3.5rem] herohommd:text-[7rem] herohomlg:text-[9rem] font-normal font-Shippori_Mincho leading-[1]">NEW HOMES</h1>
                    <h1 className="text-left text-[1.2rem] sm:text-[1.3rem] herohommd:text-[2rem] herohomlg:text-[3rem] leading-[1.2em] font-semibold">NEW DEVELOPMENTS IN PORTUGAL. </h1>
                    <h1 className="text-left text-[0.65rem] herohommd:text-[0.9rem] herohomlg:text-[1.2rem] font-medium mt-3 herohommd:mt-4">Voted the best way to buy new developments 2023-2024 according to Simple Expat  </h1>
                </div>
            </section>

            <div className=''>
                <section >
                    <DevelopmentLocations title={"Development Locations"} />
                </section>
            </div>

I want to minimize the jumping of content as much as possible