babel-plugin-react-css-modules is converting styleName to className but classnames not changed in css file

Question

I'm trying to setup babel-plugin-react-css-modules , The conversion of styleName to class and its injection is happening properly, but the styles are not getting applied, after inspection I came to know that the class names are not updated in css file that is linked in the html created.

How to make it generate css file with the generated class names from styleNames

My Webpack configuration:

const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './app/view/index.js',
    output: {
        filename: 'assets/js/bundle.[contenthash].js',
        path: path.resolve(__dirname, './dist'),
        publicPath:  path.resolve(__dirname, './dist'),
        clean: true
    },
    mode: 'development',
    devServer: {
        port: 5001,
        open: true,
        static: {
            directory: path.resolve(__dirname, './dist'),
        },
        devMiddleware: {
            index: 'index.html',
            writeToDisk: true,
        },
        client: {
            overlay: true,
        },
    },
    module: {
        rules: [
            {
                test: /\.(ttf)$/,
                type: 'asset/resource',
                generator: {
                    name: 'dist/assets/fonts/[hash][ext][query]'
                }
            },
            {
                test: /\.(png|jpg|jpeg)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 3 * 1024
                    }
                },
                generator: {
                    filename: 'assets/images/[hash][ext][query]'
                }
            },
            {
                test: /\.txt/,
                type: 'asset/source'
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [ 
                                '@babel/env',
                                '@babel/preset-react',
                            ],
                        }
                    }
                ]
            },
            {
                test: /\.hbs$/,
                use: [
                    'handlebars-loader'
                ]
            }
        ]
    },
    plugins: [
        new TerserPlugin(),
        new MiniCssExtractPlugin({
            filename: 'assets/css/style.[contenthash].css'
        }),
        new HtmlWebpackPlugin({
            title: 'hello world',
            template: 'app/view/index.hbs',
            description: 'Some Description',
        }),
        new webpack.ProvidePlugin({
            process: 'process/browser',
        }),
    ]
}

.bablerc

{
  "plugins": [
    [
      "babel-plugin-react-css-modules",
      {
        "webpackHotModuleReloading": true,
        "autoResolveMultipleImports": true
      }
    ]
  ]
}

app.js

import React, { useEffect, useState, useCallback, useRef, useReducer} from 'react';
import './welcome.css';


export const App = (props) => {
   return (
    <div
      styleName="container"
    >
       Hello World
    </div>
    );

}

welcome.css

.container {
  height: 100vh;
  width: 100vw;
  background: var(--color-system-background);
}