Hard Refresh in Browser Produces Warning and Incorrect CSS

We are attempting to use react-socks with Next.js. However, when a hard refresh is executed in the browser we get the wrong CSS applied to the markup as there seems to be a className mismatch. This issue is similar to the issue produced by Next.js when used with 'styled-components' if babel is not configured correctly. However, we are using an external sass file for the styling and not styled-components. Below is the warning from browser console when wrong className (add CSS) is applied. In this case, the client is using a mobile user-agent but the response from the server is for a desktop request. Initial requests work as expected, this issue only happens on refresh.

index.js:1 Warning: Prop `className` did not match. Server: "Example-style__desktopUA___3ICHb" Client: "Example-style__mobileUA___2vKnj"

PDF of sample code.

[react-socks_Next.js.pdf](https://github.com/flexdinesh/react-socks/files/3322182/react-socks_Next.js.pdf)