Next.js & PurgeCSS className same as component name = undefined

I've been trying to setup Next.js with PurgeCSS and did so using the PurgeCSS documentation.

I noticed that if the className is the same as the components name (Example: Container [Component] and .container [Style]) it says undefined or doesn't render any className in the class when viewing source on the browsers devtools.

I noticed that if I change the className to uppercase it works but not the preferred route to use. If I console.log(styles) it looks like it's returning the React Component object?

Anyone know why or how to fix this?

A quick example below:

postcss.config.js

module.exports = {
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ],
    [
      '@fullhuman/postcss-purgecss',
      {
        content: [
            './pages/**/*.{js,jsx,ts,tsx}',
            './components/**/*.{js,jsx,ts,tsx}'
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"]
      }
    ],
  ]
}

container.module.scss

.container {
  margin: 0 auto;
  max-width: 1440px;
}

Container.js

import styles from './container.module.scss';

function Container({ children }) {
  return <div className={styles.container}>{children}</div>;
}

export default Container;