webpack with css modules enabled generating different classname than visible in dom

Question

I am still new to webpack and babel so pardon me if make some mistake. I am upgrading a project to webpack v5 and babel to latest. I followed the official docs and was able to generate the build successfully without any errors or warnings and the app is also loading on local without any crash. But that issue, that i am facing is with css styles. The className applied in DOM is different that that of class name generated in the stylesheet that the app is refering to.

• DOM ---> head-logo-style__RwqsQ
• home.css --> head-logo-style__TeDsq

because of which the style is not getting applied and the css breaks on the app.

It seems to be the issue with mini-css-extract-plugin or css-loader (css module) and babel but i am not able to find the exact cause, i have already spent a lot of time trying to solve this but had no luck.

This is a SSR app and we have configures our own node server.

webpack.config.babel.js

module: {
...
rules: [
{
            test: /\.(sa|sc|c)ss$/,
            use: [
                { loader: MiniCssExtractPlugin.loader },
                {
                    loader: 'css-loader',
                    options: {
                        url: false,
                        modules: {
                            localIdentName: [local]___[contenthash:base64:5],
                        },
                    },
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: () => [flexBugFix, autoprefixer()],
                        },
                    },
                },
                {
                    loader: 'sass-loader',
                },
            ],
        },
...
]
}
plugins: [
...
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: '[name]/[name].css
        }),
...
]

babelrc

{
    "presets": [
    [
        "@babel/preset-env",
        {
            "modules": false,
            "useBuiltIns": "entry",
            "corejs": "3.30.0"
        }
    ],
    [
        "@babel/preset-react",
        {
            "development": true
        }
    ]
],
"plugins": [
    "@loadable/babel-plugin",
    "@babel/transform-runtime",
    "@babel/plugin-proposal-optional-chaining",
    [
        "@babel/plugin-proposal-decorators",
        {
            "legacy": true
        }
    ],
    [
        "react-css-modules",
        {
            "generateScopedName": "[local]___[contenthash:base64:5]",
            "filetypes": {
                ".scss": {
                    "syntax": "postcss-scss",
                    "plugins": [
                        "postcss-import-sync2",
                        "postcss-nested"
                    ]
                }
            }
        }
    ],
    [
        "@babel/plugin-proposal-class-properties",
        {
            "loose": true
        }
    ],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],

    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-modules-commonjs",
    [
        "lodash",
        {
            "presets": [
                [
                    "@babel/env",
                    {
                        "targets": {
                            "node": 6
                        }
                    }
                ]
            ]
        }
    ]
]
...
}