Laravel Mix - Duplicated CSS within browser dev tools (Sass to CSS)

Currently I'm seeing multiple of the same styling within the dev tools. I'm using React and Laravel Mix and not sure why it's showing the same styling multiple times as I'm using React components importing sass files within the different components but it's not recognising the same css when compiling.

Example:

Expected:

It should only be showing the @media once and the single .side-double once.

Laravel Mix file:

const mix = require('laravel-mix');
const path = require('path');
const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

//-- Website Mix --
mix.babelConfig({
   plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining'],
});

mix.webpackConfig({
    watchOptions: {
        ignored: /node_modules/
    },
    stats: {
        warnings: false,
    },
    output: {
        chunkFilename: 'website/js/chunks/[chunkhash].js',//replace with your path
    },
    resolve: {
        alias: {
            '@fonts': path.resolve(__dirname, 'resources/website/styles/fonts'),
            '@images': path.resolve(__dirname, 'resources/website/images')
        }
    },
    plugins: [
        new PurgeCSSPlugin({
            paths: glob.sync('website/*',  { nodir: true }),
        })
    ]
});

mix.options({
    postCss: [
        require('autoprefixer'),
    ],
    fileLoaderDirs:  {
        fonts: 'website/fonts',
        images: 'website/images'
    }
});

mix.js('resources/website/index.js', 'public/website/js').react();
mix.version();
//-- Website Mix End --

Updated

Definition of style:

Where is the style included: