diff --git a/demos/svg-maps-with-html-annotations/package.json b/demos/svg-maps-with-html-annotations/package.json
index d251eb4b..b778ab1d 100644
--- a/demos/svg-maps-with-html-annotations/package.json
+++ b/demos/svg-maps-with-html-annotations/package.json
@@ -12,6 +12,7 @@
     "@react-three/fiber": "^8.16.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "three-stdlib": "^2.29.9",
     "three": "^0.165.0"
   },
   "devDependencies": {
diff --git a/demos/svg-maps-with-html-annotations/src/index.jsx b/demos/svg-maps-with-html-annotations/src/index.jsx
index e02f4104..10b1f420 100755
--- a/demos/svg-maps-with-html-annotations/src/index.jsx
+++ b/demos/svg-maps-with-html-annotations/src/index.jsx
@@ -5,6 +5,7 @@ import { Canvas, useLoader } from '@react-three/fiber'
 import { SVGLoader } from 'three-stdlib'
 import { MapControls } from '@react-three/drei'
 import './styles.css'
+import map from "./map.svg"
 
 const hoveredCursor =
   'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIj48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIyNi41IiBmaWxsPSJibGFjayIgc3Ryb2tlPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzIgMzJMMzIgNDVIMzNMMzMgMzJINDVWMzFIMzNWMTlIMzJWMzFIMTlWMzJIMzJaIiBmaWxsPSJ3aGl0ZSIvPjxwYXRoIGQ9Ik0xLjk2MjMxIDEuOTYyMzFMMTMuNzAzMyA1LjEwODI5TDUuMTA4MjkgMTMuNzAzM0wxLjk2MjMxIDEuOTYyMzFaIiBmaWxsPSJibGFjayIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+'
@@ -19,7 +20,7 @@ function Cell({ color, shape, fillOpacity }) {
   return (
     <mesh onPointerOver={(e) => hover(true)} onPointerOut={() => hover(false)}>
       <meshBasicMaterial color={hovered ? 'hotpink' : color} opacity={fillOpacity} depthWrite={false} transparent />
-      <shapeBufferGeometry args={[shape]} />
+      <shapeGeometry args={[shape]} />
     </mesh>
   )
 }
@@ -50,7 +51,7 @@ function App() {
   return (
     <Canvas frameloop="demand" orthographic camera={{ position: [0, 0, 50], zoom: 2, up: [0, 0, 1], far: 10000 }}>
       <Suspense fallback={null}>
-        <Svg url="/map.svg" />
+        <Svg url={map} />
       </Suspense>
       <MapControls enableRotate={false} />
     </Canvas>
diff --git a/demos/svg-maps-with-html-annotations/public/map.svg b/demos/svg-maps-with-html-annotations/src/map.svg
similarity index 100%
rename from demos/svg-maps-with-html-annotations/public/map.svg
rename to demos/svg-maps-with-html-annotations/src/map.svg
diff --git a/package-lock.json b/package-lock.json
index c8135791..aa3c0682 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6884,7 +6884,8 @@
         "@react-three/fiber": "^8.16.8",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "three": "^0.165.0"
+        "three": "^0.165.0",
+        "three-stdlib": "^2.29.9"
       },
       "devDependencies": {
         "@types/react": "^18.2.0",