Allow zooming via buttons only?

[connercms]

Is there a method to retain panning but only allow zooming via button click, or disable mouse wheel zoom? I have the following ZoomableGroup

 <ZoomableGroup
          zoom={position.zoom}
          maxZoom={1}
          minZoom={0.5}
          center={position.coordinates}
          onMoveEnd={handleMoveEnd}
        >

buttons for handling zoom

   <button onClick={handleZoomIn}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="3"
            >
              <line x1="12" y1="5" x2="12" y2="19" />
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
          </button>
          <button onClick={handleZoomOut}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth="3"
            >
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
          </button>

and their handler functions

  function handleZoomIn() {
    if (position.zoom >= maxZoom) return;
    setPosition((pos) => ({ ...pos, zoom: pos.zoom + 0.25 }));
  }

  function handleZoomOut() {
    if (position.zoom <= minZoom) return;
    setPosition((pos) => ({ ...pos, zoom: pos.zoom - 0.25 }));
  }

I've tried setting onScroll and onScrollCapture on the both the ComposableMap and the ZoomableGroup like

onScroll={(e) => {
            e.preventDefault();
            return false;
          }}

But this doesn't work. The use case is when dealing with a large map that enables scroll on a page; when scrolling back toward the top of the page with the mouse wheel, if the cursor is on the map component, it will zoom the map before scrolling the page.

[torchsmith]

https://github.com/zcreativelabs/react-simple-maps/issues/203