diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 480a9fa5..de030d3d 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 import { Stats } from 'glodrei';
 import theme from './theme';
 import { Preview } from '@storybook/react';
+import React from 'react';
 
 const withProvider = (Story, context) => (
   <>
diff --git a/package-lock.json b/package-lock.json
index 50f06a64..c11fb634 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@react-spring/three": "9.6.1",
         "@react-three/fiber": "8.13.5",
+        "@use-gesture/react": "^10.3.1",
         "camera-controls": "^2.8.3",
         "classnames": "^2.5.1",
         "d3-array": "^3.2.4",
@@ -26,7 +27,6 @@
         "graphology-metrics": "^2.1.0",
         "graphology-shortest-path": "^2.0.2",
         "hold-event": "^0.2.0",
-        "react-use-gesture": "^9.1.3",
         "reakeys": "^2.0.3",
         "three": "^0.154.0",
         "three-stdlib": "^2.23.13",
@@ -18008,15 +18008,6 @@
         }
       }
     },
-    "node_modules/react-use-gesture": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.1.3.tgz",
-      "integrity": "sha512-CdqA2SmS/fj3kkS2W8ZU8wjTbVBAIwDWaRprX7OKaj7HlGwBasGEFggmk5qNklknqk9zK/h8D355bEJFTpqEMg==",
-      "deprecated": "This package is no longer maintained. Please use @use-gesture/react instead",
-      "peerDependencies": {
-        "react": ">= 16.8.0"
-      }
-    },
     "node_modules/react-use-measure": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
diff --git a/package.json b/package.json
index e05ed577..bec850c4 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
   "dependencies": {
     "@react-spring/three": "9.6.1",
     "@react-three/fiber": "8.13.5",
+    "@use-gesture/react": "^10.3.1",
     "camera-controls": "^2.8.3",
     "classnames": "^2.5.1",
     "d3-array": "^3.2.4",
@@ -68,7 +69,6 @@
     "graphology-metrics": "^2.1.0",
     "graphology-shortest-path": "^2.0.2",
     "hold-event": "^0.2.0",
-    "react-use-gesture": "^9.1.3",
     "reakeys": "^2.0.3",
     "three": "^0.154.0",
     "three-stdlib": "^2.23.13",
diff --git a/src/utils/useDrag.ts b/src/utils/useDrag.ts
index 7ac83239..26804b15 100644
--- a/src/utils/useDrag.ts
+++ b/src/utils/useDrag.ts
@@ -1,6 +1,6 @@
 import { useThree } from '@react-three/fiber';
 import { useMemo } from 'react';
-import { useGesture } from 'react-use-gesture';
+import { useGesture } from '@use-gesture/react';
 import { Vector2, Vector3, Plane } from 'three';
 import { InternalGraphPosition } from '../types';
 
@@ -61,12 +61,10 @@ export const useDrag = ({
         // Run user callback
         onDragStart();
       },
-      onDrag: ({ event }) => {
+      onDrag: ({ xy }) => {
         // Compute normalized mouse coordinates (screen space)
-        const nx =
-          ((event.clientX - (clientRect?.left ?? 0)) / size.width) * 2 - 1;
-        const ny =
-          -((event.clientY - (clientRect?.top ?? 0)) / size.height) * 2 + 1;
+        const nx = ((xy[0] - (clientRect?.left ?? 0)) / size.width) * 2 - 1;
+        const ny = -((xy[1] - (clientRect?.top ?? 0)) / size.height) * 2 + 1;
 
         // Unlike the mouse from useThree, this works offscreen
         mouse2D.set(nx, ny);