use-gesture: onDrag stops firing when cursor gets out of targets bounds

Describe the bug I am using useGesture to drag ThreeJS Fiber groups an am running into a issue where as soon as the mouse cursors leaves the bounds of the dragged object the onDrag event stops firing (see video)

Any idea whats going on?

Here is my code

const {gl} = useThree();

const [spring, setSpring] = useSpring(() => ({position: [position.x, position.y, position.z], scale: [1, 1, 1]}));

const bind = useGesture(
        {
            onDragStart: (state) => {
                if (state.event.buttons === 1) {
                    setDisableOrbitControls();
                    setSelectedSubjectsUids?.([props.uid]);
                }
            },
            onDrag: ({buttons, offset: [x, y]}) => {
                if (buttons === 1) {
                    setSpring({position: [x, y, 0]});
                }
            },
            onDragEnd: (state) => {
                setEnableOrbitControls();

                writeElementPositionDebounced(position.x, position.y);
            },
            onAbort: (state) => {
                setEnableOrbitControls();
            },
        },
        {
            transform: ([x, y]) => {
                function getSceneMousePosition(clientX: number, clientY: number): Vector3 {
                    const {mouseX, mouseY} = getRelativeMousePosition(gl.domElement, clientX, clientY);

                    const sceneMousePosition = new Vector3();

                    sceneMousePosition.set(mouseX, mouseY, 0).unproject(camera);
                    return sceneMousePosition;
                }

                const sceneMousePosition = getSceneMousePosition(x, y);

                return [sceneMousePosition.x, sceneMousePosition.y];
            },
            drag: {
                filterTaps: true,
                useTouch: true,
            },
            enabled: props.dragable,
        },
    );
    
    return (
            <animated.group
                {...(bind() as any)}
                {...(spring as any)}
            >
               // bunch of ThreeJS objects in here
            </animated.group>
        );
   

Sandbox or Video https://www.loom.com/share/a13f14b78330479495f82f95327e08b8

Information:

• React Use Gesture version: 9.1.3
• Device: Mac Mini M1
• OS: OSX
• Browser: Chrome

Checklist:

• I’ve read the documentation.
• [NA] If this is an issue with drag, I’ve tried setting touch-action: none to the draggable element.