Draggable can't be control by state from the middle key of mouse

[mobilesite]

Demo:

import { useState, useRef } from 'react';
import { Stage, Layer, Rect } from 'react-konva';

function Demo() {
  const [isDraggingEnabled, setIsDraggingEnabled] = useState(false);
  const stageRef = useRef(null);

  const handleMouseDown = (e) => {
    const evt = e.evt;
    console.log('MouseDown:', evt.which);
    if (evt.which === 2 || evt.which === 4) {
      evt.preventDefault();
      setIsDraggingEnabled(true);
    }
  };

  const handleMouseUp = (e) => {
    const evt = e.evt;
    console.log('MouseUp:', evt.which);
    if (evt.which === 2 || evt.which === 4) {
      evt.preventDefault();
      setIsDraggingEnabled(false);
    }
  };

  return (
    <Stage
      width={window.innerWidth}
      height={window.innerHeight}
      draggable={isDraggingEnabled}
      onDragStart={() => console.log('DragStart')}
      onDragEnd={() => console.log('DragEnd')}
      style={{ backgroundColor: '#f2f2f2' }}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      ref={stageRef}
    >
      <Layer>
        <Rect x={20} y={20} width={100} height={100} fill="red" draggable={false} />
      </Layer>
    </Stage>
  );
}

export default Demo;

When i press down the middle key of my mouse and drag the stage, the stage can't be dragged.

And the log is:

MouseDown: 2
MouseDown: 4
MouseUp: 2
MouseUp: 4
MouseDown: 2
MouseDown: 4
MouseUp: 2
MouseUp: 4
……

The dependencies are:

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "konva": "^9.3.16",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-konva": "^18.2.10"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.13",
    "globals": "^15.11.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.10.0",
    "vite": "^5.4.9"
  }
}

[lavrton]

Probably you want this: https://konvajs.org/api/Konva.html#.dragButtons