scss module style not applied in nextjs component

I just set up a new nextjs app and I'm trying to set up component focused scss module stylings in my components. I don't know what's wrong but the class styles just seem not to be applied to my html tags.

Here's how my component is looking:

import { Menubar } from 'primereact/menubar';
import { InputText } from 'primereact/inputtext';
import styles from './styles/Header.module.scss';

const Header = () => {
  const navlist = [
    { label: 'Browse', icon: 'pi pi-fw pi-search' },
    { label: 'Register', icon: 'pi pi-fw pi-file' },
    { label: 'Sell', icon: 'pi pi-fw pi-phone' },
  ];

  return (
    <div className={styles.margin}>
      <header>
        {' '}
        <nav>
          <ul>
            {' '}
            <Menubar
              end={<InputText placeholder="Search" type="text" />}
              model={navlist}
              style={{ backgroundColor: '#2c2c4d' }}
            />
          </ul>
        </nav>
      </header>
    </div>
  );
};

export default Header;

next.config.

const path = require('path');

module.exports = {
  /* Add Your Scss File Folder Path Here */
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  reactStrictMode: true,
};

Header.module.scss

.margin {
  margin-top: 300px;
  background-color: red;
}

applied class on the div is Header_margin__XOv1j

I'm sure there's something i'm missing here, even though I checked out online and this seems to be the proper way to go about with scss in nextjs.

any help is welcome...