For some annoying reason Storybook is not resolving my fonts and giving me this error

Error: Can't resolve './fonts/font-Bold.eot' in '/Users/admin/Documents/project/src/Website/src/components/Carousel'

If repeats this error for all the other fonts.

Using

"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-interactions": "^6.4.19",
"@storybook/addon-links": "^6.4.19",
"@storybook/builder-webpack5": "^6.4.19",
"@storybook/manager-webpack5": "^6.4.19",
"@storybook/preset-create-react-app": "^4.1.0",
"@storybook/react": "^6.4.19",
"@storybook/testing-library": "^0.0.9",

./storybook/main.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  'addons': [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve('./src'),
    ];

    config.entry.push(
      path.resolve('./src/storybook.ts'),
    );

    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, '/src/components'),
      '@media': path.resolve(__dirname, '/src/media'),
      '@core': path.resolve(__dirname, '/src/core'),
      '@styles': path.resolve(__dirname, '/src/styles'),
    };

    config.module.rules.push({
      test: /\.(scss|sass)$/,
      use: [
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [
              path.resolve(__dirname, '../src/styles/fonts.scss'),
              path.resolve(__dirname, '../src/styles/global.scss'),
            ],
          },
        },
      ],
    });

    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(__dirname, '../src/media/'),
            to: './media'
          },
          {
            from: path.join(__dirname, '../src/styles/fonts/'),
            to:'./fonts'
          },
        ],
      }),
    );

    return config;
  }
}

Not sure if this is something i am doing in the custom webpack changes or it's happening in the storybook config.