Storybook NextJs - Reference assets from a CDN

I'm having trouble in Storybook loading my next.config.js via Webpack. Images work just fine when they are loaded statically however if they come from a CDN then it doesn't pick up the nextjs configuration.

This is the error I'm getting:

Invalid src prop (https://cdn.shopify.com/s/files/1/0592/5188/4084/products/category-page-01-image-card-01_f7d55576-7bdb-4f07-ae34-565131fc2e4a.jpg?v=1652279558) on `next/image`, hostname "cdn.shopify.com" is not configured under images in your `next.config.js`

All is good on the actual site, this only occurs in Storybook.

My storybook config:

// ./.storybook/main.js
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "staticDir": ['../public'],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-css-modules",
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  webpackFinal: async (config) => {
    config.resolve.plugins = [new TsconfigPathsPlugin()];
    const nextConfig = require('../next.config.js')   
    return{ ...nextConfig.webpack, ...config }
  },
}

Preview

// ./.storybook/preview.js
import "../styles/globals.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].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

NextJs config:

// ./next.config.js
module.exports = {
  images: {
    domains: ["cdn.shopify.com"],
  },
};

If anyone can help me out it would be greatly appreciated. Thanks in advance for taking the time to look.