React-flexbox-grid: Prop `className` did not match between client and server

Question

When configuring react-flexbox-grid along with sass inside Next.js. Facing this challenge.

The project created using latest: create-next-app and I do not have any custom changes in .babelrc

Error

index.js:2178 Warning: Prop className did not match. Server: "col-xs-12 col-md-4 col-lg-2" Client: "col-xs-12__flexboxgrid2__AdoKE col-md-4__flexboxgrid2__3pbbS col-lg-2__flexboxgrid2__1x6vt"

Sass Configuration Looks like this:

const sassConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]__[name]__[hash:base64:5]'
  }
};

Some more:

module.exports = withPlugins(
  [[withSass, sassConfig], [withCss], [optimizedImages, optimizedImagesConfig]],
  nextConfiguration
);

Tried including and excluding flexboxgrid inside sass configuration above, but still no luck.

After long research, I was able to resolve the issue by overriding the localIdentName:[local], so that it matches both client and server render. Unfortunately, if i use: localIdentName: '[local]__[name]__[hash:base64:5]', it fails as the client is using: localIdentName:[local]. So, how and where we can override like clientIdentName? Do we need to play something with .babelrc?