diff --git a/.storybook/NextImage.jsx b/.storybook/NextImage.jsx
new file mode 100644
index 00000000..71f65a56
--- /dev/null
+++ b/.storybook/NextImage.jsx
@@ -0,0 +1,3 @@
+import Image from 'next/image'
+const NextImage = (props) => <Image unoptimized {...props} />
+export default NextImage
diff --git a/.storybook/main.js b/.storybook/main.js
index 8aa8ea6d..9c15a7b0 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -24,6 +24,7 @@ module.exports = {
     config.resolve.alias = {
       ...config.resolve.alias,
       '~': path.resolve(__dirname, '../'),
+      'next/image': require.resolve('./NextImage.jsx'),
     }
 
     return config
diff --git a/.storybook/preview.jsx b/.storybook/preview.js
similarity index 60%
rename from .storybook/preview.jsx
rename to .storybook/preview.js
index 0c3716b0..6632e6eb 100644
--- a/.storybook/preview.jsx
+++ b/.storybook/preview.js
@@ -1,12 +1,4 @@
 import '../src/styles/tailwind.css'
-import * as NextImage from 'next/image'
-
-const OriginalNextImage = NextImage.default
-
-Object.defineProperty(NextImage, 'default', {
-  configurable: true,
-  value: (props) => <OriginalNextImage {...props} unoptimized />,
-})
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },