Moduled css not working in React App with custom webpack app (not CRA or Vite)

Question

Trying to use moduled css in React Microfrontend apps, the styles are getting into browser but not scoped in html dom on refering in chrome devtools.

Versions of loaders:

├── css-loader@7.1.2
└── style-loader@2.0.0

I have this webpack config file:

{
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]', // Custom format
              },
              importLoaders: 1,
            },
          },
        ],
      },      
      {
        test: /\.css$/i,
        exclude: /\.module\.css$/,
        use: ['style-loader', 'css-loader'],
      },      
}

In component file:

import styles from './cssFilename.module.css';

<div className={styles.logo}>

I have used the same pattern and worked in CRA and Vite.. Like that I am trying here..

I can able to get the style file to the browser, But not scoped in HTML DOM. So that is not getting scoped any styles, simply getting empty <div> without any class names.

<div>
    <a href="https://convinicar.com/" target="blank">
        <img src="http://localhost/84a44bf4c2af1ccb57ab.png" alt="">
    </a>
</div>

<style>
#LoginCopy-module__root___hXYVA, body, html {
    margin:  0 auto;
    height: 100%;
    width: 100%;
}

.LoginCopy-module__container___gfEqF{
    margin: 0% 10%;
    height: 100%;
}
</style>