I am trying to get Css Modules working in React SSR.

This is my webpack config

module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
            },{
                test:/\.(s*)css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },

                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                mode: 'local',
                                localIdentName: "[name]__[local]___[hash:base64:5]"
                            },
                            import: true,
                            importLoaders: true,
                        }
                    },
                    {
                        loader: "sass-loader",
                    }
                ],
            },
        ]

And my babelrc file

"env": {
   "test": {
     "presets": [
       "react"
     ],
     "plugins": [
       ["react-css-modules", {
         "generateScopedName": "[name]__[local]___[hash:base64:5]"
       }],
       "transform-es2015-modules-commonjs",
       "@babel/plugin-transform-runtime"

     ]
   }
 }
}

I have made the local ident name same in both cases but still the name on the client is different than on the server for the element.

generated on server styles.css

.Home__Container___KBMxU {
  display: flex;
  width: 600px;
  height: 300px;
  border: 2px solid red; }

And on on the client is Home__Container___2eVzQ

What is causing this Name mismatch in styles ?