Создание parallax effect на основе библиолтеки framer motion. При указывании значения из hook-а useTransform элемент начинает дёргаться

При scroll начальное изображение для которой задаёться сдвиг вниз через hook useTransform начинает дергаться и отставать от верхнего края, при быстром оно стаёт будто эпилепсия. С чем это связано и как это исправить?

interface IPortfolio { }
    
    const App: React.FC<IPortfolio> = () => {
        return (
            <>
                <Header />
            </>
        );
    };


const Header = () => {
    const headerParallaxRef = useRef<HTMLDivElement>(null);
    const { scrollYProgress } = useScroll({
        target: headerParallaxRef,
        offset: ["start start", "end start"]
    });
    const backgroundBaseY = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
    const headerTitleY = useTransform(scrollYProgress, [0, 1], ["0%", "200%"]);

    return (
        <div
            className="relative"
        >
            <div
                ref={headerParallaxRef}
                className="
                    h-screen 
                    flex justify-center items-center text-center 
                    overflow-hidden relative
                "
            >
                <motion.div
                    className="
                        header-section-titles
                        z-[1]
                    "
                    style={{
                        y: headerTitleY,
                    }}
                >
                    <div
                        className="
                            header-caption
                            text-[#e1e1e1]
                            font-bold
                        "
                    >
                        Hello,
                        <span
                            className="
                                text-[#0E1D42]
                            "
                        > my name is</span>
                    </div>
                    <div
                        className="
                            header-title
                            uppercase
                            font-black
                            bg-gradientHeaderTitle
                            bg-clip-text
                            text-transparent
                        "
                    >
                        Vitaly Lavrov
                    </div>
                    <div
                        className="
                            header-subtext
                            text-[#e1e1e1]
                            font-bold
                        "
                    >
                        I'am a Web Developer
                    </div>
                </motion.div>

                <motion.div
                    className="header-bg z-[0]"
                    style={{
                        backgroundImage: "url(img/header/base.png)",
                        y: backgroundBaseY
                    }}
                />
                <motion.div
                    className="header-bg z-[1] header-shadow"
                    style={{
                        backgroundImage: "url(img/header/center.png)"
                    }}
                />

            </div>
        </div >
    );
};