NextJS - discrepancy between client and server class hash name - race condition

__Expected behavior:__

The generated class name should be consistent and deterministic on client and server side.

__Describe the bug:__

When launching the server for the first time, the class aligns. Randomly, when the page is refreshed, the newly client-side generated class does not match the server-side generated names.

The error is :

```
Warning: Prop `className` did not match.
Server: "ctaBtn-cta_btn-0-2-55"
Client: "ctaBtn-cta_btn-0-2-6"
```

__Reproduction:__

* Use `createUseStyles` in js files to generate css
* Using Next (I use Netlify as well), launch the dev server: `netlify dev -e -p 4000`.
* Load a page
* Either reload several times or try to modify the code, the page should refresh on its own.
* css breaks because Next is un-happy about the mis-match.

__Versions (please complete the following information):__

```
"dependencies": {
"@netlify/plugin-nextjs": "^3.4.2",
"lodash": "^4.17.21",
"next": "^10.0.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^6.7.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-jss": "^10.6.0",
"react-onclickoutside": "^6.11.2",
"react-svg": "14.0.0"
},
"devDependencies": {
"classnames": "^2.2.6",
"postcss": "^8.3.0",
"sass": "^1.34.1"
}
```