Unable to rotate orthographic projection

[SylCard]

Hi, I am trying to create a 3d rotating globe, I've looked at the docs and it is not clear to me how I can create a smooth rotate, becaue the OnMove prop apparently doesn't exist on Zoomable Group any help is truly appreciated, please see my code below!

`const MapChart = ({ setTooltipContent }:MapProps) => { const [rotate, setRotate] = React.useState<[number,number,number]>([0,0,0]); const [isPressed, setPressed] = React.useState(false); const [position, setPosition] = useState({ coordinates: [0, 0], zoom: 1 });

function handleMouseDown(currentPosition:{coordinates: number[], zoom: number}) { setPressed(true); setPosition(currentPosition); };

function handleMouseUp(currentPosition:{coordinates: number[], zoom: number}) {
    const differenceX =  position.coordinates[0] - currentPosition.coordinates[0];
    const differenceY =  position.coordinates[1] - currentPosition.coordinates[1];

    setRotate([
       rotate[0] - differenceX / 2,
       rotate[1] + differenceY / 2,
      0,
    ]);
    setPosition(currentPosition);
    setPressed(false);
};

return ( <> <ComposableMap data-tip="" projection="geoOrthographic" projectionConfig={{ rotate:rotate,scale: 220 }} > <ZoomableGroup onMoveStart={handleMouseDown}

              onMoveEnd={handleMouseUp}
     >
      <Geographies geography={geoUrl} >
        {({ geographies }) =>
          geographies.map(geo => {
            const { NAME, POP_EST } = geo.properties;
            return (
            <Geography
              key={geo.rsmKey}
              geography={geo}

            />);
          })
        }
      </Geographies>
    </ZoomableGroup>
  </ComposableMap>
</>`