diff --git a/package-lock.json b/package-lock.json
index 415c5b6..9b2db81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "usehooks-ts": "^2.9.1"
+        "usehooks-ts": "^3.1.0"
       },
       "devDependencies": {
         "@babel/preset-react": "^7.18.6",
@@ -7924,8 +7924,7 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
@@ -10195,16 +10194,17 @@
       }
     },
     "node_modules/usehooks-ts": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
-      "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
+      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
       "engines": {
-        "node": ">=16.15.0",
-        "npm": ">=8"
+        "node": ">=16.15.0"
       },
       "peerDependencies": {
-        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0  || ^17 || ^18"
       }
     },
     "node_modules/v8-to-istanbul": {
diff --git a/package.json b/package.json
index 4966e42..01828b7 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "usehooks-ts": "^2.9.1"
+    "usehooks-ts": "^3.1.0"
   }
 }
diff --git a/src/presets/minimap/components/Minimap.tsx b/src/presets/minimap/components/Minimap.tsx
index ad28319..0fad7fa 100644
--- a/src/presets/minimap/components/Minimap.tsx
+++ b/src/presets/minimap/components/Minimap.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useCallback, useRef } from 'react'
 import styled from 'styled-components'
-import { useElementSize } from 'usehooks-ts'
+import { useResizeObserver } from 'usehooks-ts'
 
 import { Rect, Transform, Translate } from '../types'
 import { px } from '../utils'
@@ -31,13 +31,12 @@ type Props = {
 }
 
 export function Minimap(props: Props) {
-  const container = useRef<HTMLElement | null>()
-  const [containerRef, { width: containerWidth }] = useElementSize()
-  const scale = (v: number) => v * containerWidth
-  const ref = useCallback((node: HTMLDivElement | null) => {
-    container.current = node
-    containerRef(node)
-  }, [containerRef])
+  const ref = useRef<HTMLDivElement>(null)
+  const { width = 0 } = useResizeObserver({
+    ref
+  })
+  const containerWidth = ref.current?.clientWidth || width
+  const scale = useCallback((v: number) => v * containerWidth, [containerWidth])
 
   return <Styles
     size={props.size}
@@ -52,8 +51,8 @@ export function Minimap(props: Props) {
     onDoubleClick={e => {
       e.stopPropagation()
       e.preventDefault()
-      if (!container.current) return
-      const box = container.current.getBoundingClientRect()
+      if (!ref.current) return
+      const box = ref.current.getBoundingClientRect()
       const x = (e.clientX - box.left) / (props.size * props.ratio)
       const y = (e.clientY - box.top) / (props.size * props.ratio)
 
@@ -62,7 +61,7 @@ export function Minimap(props: Props) {
     ref={ref}
     data-testid="minimap"
   >
-    {containerWidth && props.nodes.map((node, i) => (
+    {containerWidth ? props.nodes.map((node, i) => (
       <MiniNode
         key={i}
         left={scale(node.left)}
@@ -70,7 +69,7 @@ export function Minimap(props: Props) {
         width={scale(node.width)}
         height={scale(node.height)}
       />
-    ))}
+    )) : null}
     <MiniViewport
       {...props.viewport}
       start={props.start}