diff --git a/.storybook/preview.ts b/.storybook/preview.ts
deleted file mode 100644
index 2ad27f4..0000000
--- a/.storybook/preview.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Preview } from "@storybook/react";
-import './style.css';
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-    options: {
-      storySort: {
-        order: ['Intro', 'Layers', 'Controls', 'Interactions'],
-      },
-    },
-  },
-};
-
-export default preview;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
new file mode 100644
index 0000000..0cc8884
--- /dev/null
+++ b/.storybook/preview.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import type { Preview, Decorator } from '@storybook/react';
+import './style.css';
+
+// Storybook parameters
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    options: {
+      storySort: {
+        order: ['Intro', 'Layers', 'Controls', 'Interactions'],
+      },
+    },
+  },
+};
+
+// Wrap all stories in React.StrictMode
+export const decorators: Decorator[] = [
+  (Story) => (
+    <React.StrictMode>
+      <Story />
+    </React.StrictMode>
+  ),
+];
+
+// Provides Storybook with your global config.
+export default preview;
diff --git a/package.json b/package.json
index 29df4ec..e432b33 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-openlayers",
-  "version": "10.5.0",
+  "version": "10.5.1",
   "description": "React + OpenLayers",
   "author": "Allen Kim",
   "type": "module",
diff --git a/src/lib/Map.tsx b/src/lib/Map.tsx
index 55af0fe..093af64 100644
--- a/src/lib/Map.tsx
+++ b/src/lib/Map.tsx
@@ -35,11 +35,11 @@ export const Map = forwardRef<OlMap | undefined, MapProps>((props, ref) => {
 
   useImperativeHandle(ref, () => map, [map]);
 
-  const mounted = useRef(false);
   const defaultLayer = new TileLayer({ source: new OSM() });
 
   useEffect(() => {
-    if (!mapRef.current || mounted.current) return;
+    if (!mapRef.current) return;
+    // Always create a new map instance on mount
     const mapProps = {
       ...{
         target: mapRef.current,
@@ -50,15 +50,16 @@ export const Map = forwardRef<OlMap | undefined, MapProps>((props, ref) => {
           zoom: 2, // Default zoom level
         }),
       },
-      ...props, // Override with props.view if provided
+      ...props, // Override with props if provided
     };
     const olMap = new OlMap(mapProps);
     setMap(olMap);
-    mounted.current = true;
     return () => {
       olMap.setTarget(undefined);
+      setMap(undefined);
+      console.log('Map unmounted');
     };
-  }, []);
+  }, [mapRef]);
 
   return (
     <MapContext.Provider value={map}>