How to enable two finger scroll and drag in react?

[okanji]

I am having trouble getting two finger pan and drag to work like it does in the demo. I seem to have pinch working but I would prefer it to zoom to the mouse position like it does in the demo. Is this all supposed to work out of the box or does one need to implement this?

"use client";

import React, { useEffect, useState, useRef } from "react";
import InfiniteViewer from "react-infinite-viewer";

export default function Gestures({ children }: { children: React.ReactNode }) {
  const [zoom, setZoom] = useState(1);

  return (
    <InfiniteViewer
      className="viewer"
      usePinch={true}
      useMouseDrag={true}
      useWheelScroll={true}
      useAutoZoom={true}
      zoomRange={[0.1, 10]}
      maxPinchWheel={10}
      zoom={zoom}
      margin={0}
      threshold={0}
      rangeX={[0, 0]}
      rangeY={[0, 0]}
      onDragStart={(e) => {
        const target = e.inputEvent.target;
        console.log(target);
        if (target.nodeName === "A") {
          e.stop();
        }
      }}
      onScroll={(e) => {
        console.log(e);
      }}
      onPinch={(e) => {
        const newZoom = Math.max(0.1, e.zoom);
        setZoom(newZoom);
        console.log("Pinch", newZoom);
      }}
    >
      {children}
    </InfiniteViewer>
  );
}

Would really appreciate some help. This could be a helpful react example it someone could assists.

Note that in my example, children is an svg

Thanks!

[daybrush]

@okanji

Because rangeX and rangeY are 0,0, the position according to the mouse may not be displayed properly.