Server generated css class name is different from the one generated on the client

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 ?