Webpack CSS class non applied to HTML elements and React components

Question

I set up a project with Webpack, Lit2 and React.

I have a problem with CSS Stylesheet and React components. I created a stylesheet 'homesheet.module.css' and imported in my React component.

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

export const CustomDivider = () => {
  return (
    <>
      <hr className={styles.customDivider}></hr>
    </>
  );
};

My Webpack configs are:

// For our css modules these will be locally scoped
const CSSModuleLoader = {
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]_[local]_[hash:base64:5]',
    },
    importLoaders: 1,
    sourceMap: false, // turned off as causes delay
  }
}
// For our normal CSS files we would like them globally scoped
const CSSLoader = {
  loader: 'css-loader',
  options: {
    importLoaders: 1,
    sourceMap: false, // turned off as causes delay
  }
}

// Standard style loader (prod and dev covered here)
const styleLoader = devMode ? 'style-loader' : MiniCssExtractPlugin.loader;

module.exports = {
  entry: {
    app: './index-app.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [styleLoader, CSSLoader]
      },
      {
        test: /\.module\.css$/,
        use: [styleLoader, CSSModuleLoader]
      }
    ],
  },
  resolve: {
    extensions: ['.*', '.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'build'),
    clean: true,
  },
};

If i build the project, go to the page I'm interested in with any browser and open the inspector, I see my

---

element with a class name assigned, but the style is not applied and the class is not shown on the Style tab of the inspector.

hr from the inspector

hr styles from the inspector

I don't have any console error. Can you help me to figure it out? I checked everywhere.

I tried to change webpack configs file, I installed the css-loader and style-loader. I also tried to use and import the css sheet without module but nothing worked.