Why does my custom cursor breaking after scroll?

Question

I've created a custom cursor that doesn't responding to scroll, it's just freezing on last place before scroll and shows not actually mouse position

const Cursor = () => {
    const { type } = useContext(CursorContext);
    const secondaryCursor = React.useRef(null);
    const mainCursor = React.useRef(null);
    const positionRef = React.useRef({
        mouseX: 0,
        mouseY: 0,
        destinationX: 0,
        destinationY: 0,
        distanceX: 0,
        distanceY: 0,
        key: -1,
    });

    useEffect(() => {
        document.addEventListener('mousemove', event => {
            const { clientX, clientY } = event;
            const mouseX = clientX;
            const mouseY = clientY;
            //@ts-ignore
            positionRef.current.mouseX = mouseX - secondaryCursor.current.clientWidth / 2;
            //@ts-ignore
            positionRef.current.mouseY = mouseY - secondaryCursor.current.clientHeight / 2;
            //@ts-ignore
            mainCursor.current.style.transform = `translate3d(${mouseX - mainCursor.current.clientWidth / 2}px, ${mouseY - mainCursor.current.clientHeight / 2}px, 0)`;
        });
        return () => {};
    }, []);

    useEffect(() => {
        const followMouse = () => {
            positionRef.current.key = requestAnimationFrame(followMouse);
            const {mouseX, mouseY, destinationX, destinationY, distanceX, distanceY} = positionRef.current;
            if (!destinationX || !destinationY) {
                positionRef.current.destinationX = mouseX;
                positionRef.current.destinationY = mouseY;
            } else {
                positionRef.current.distanceX = (mouseX - destinationX) * 0.2;
                positionRef.current.distanceY = (mouseY - destinationY) * 0.2;
                if (Math.abs(positionRef.current.distanceX) + Math.abs(positionRef.current.distanceY) < 0.2) {
                    positionRef.current.destinationX = mouseX;
                    positionRef.current.destinationY = mouseY;
                } else {
                    positionRef.current.destinationX += distanceX;
                    positionRef.current.destinationY += distanceY;
                }
            }
            //@ts-ignore
            secondaryCursor.current.style.transform = `translate3d(${destinationX}px, ${destinationY}px, 0)`;
        };
        followMouse();
    }, []);
    return (
        <div className={`cursor-wrapper ${type}`}>
            <div className="main-cursor" ref={mainCursor}>
                <div className="main-cursor-background"/>
            </div>
            <div className="secondary-cursor" ref={secondaryCursor}>
                <div className="cursor-background"/>
            </div>
        </div>
    );
};

export default Cursor;

My Cursor consists of two parts: the dot, that displays the actual mouse position and the circle around the main dot, that follows the dot with a little delay.

Should I implement scroll handler or I just did a mistake anywhere ?