Getting RunTime Error

import {
    useRive,
    useStateMachineInput,
    Fit,
    Layout as RiveLayout,
    Alignment
} from "@rive-app/react-canvas";
import { useEffect } from "react";
import s from './HeroScrollRive.module.scss'

import { useScroll } from '@/hooks/use-scroll'

export default function HeroScrollingRive(props) {
    const { rive, RiveComponent } = useRive({
        src: "/eyenai.riv",
        artboard: "HeroAnimation",
        stateMachines: "ScrollingBehaviour",
        layout: new RiveLayout({
            fit: Fit.FitHeight,
            alignment: Alignment.CenterRight,
        }),
        autoplay: true,
    })

    const scrollPos = useStateMachineInput(
        rive,
        "ScrollingBehaviour",
        "ScrollPos",
        0
    )

    useEffect(() => {
        let scrollListener;
        if (scrollPos) {
            const body = document.querySelector("body");
            const bodyParent = body.parentNode;
            const pageLength = bodyParent.scrollHeight;

            const scrollCallback = () => {
                const scrollOffset = bodyParent.scrollTop;
                const scrollPosValue =
                    (450 * scrollOffset) / (pageLength - bodyParent.clientHeight);
                scrollPos.value = scrollPosValue;
            };

            scrollListener = document.addEventListener("scroll", scrollCallback);
        }

        return () => {
            if (scrollListener) {
                document.removeEventListener("scroll", scrollListener);
                console.log(scrollListener);
            }
        };
    }, [scrollPos]);

    return (
        <RiveComponent className={s.hero__rive} />
    );
}