[react-jss] Sometimes `<style>` is injected after first render — which makes CSS transitions fire immediately

__Describe the bug:__
I have encountered this bug in production and tried to reduce the example as much as possible.
Under certain conditions CSS transitions get triggered when page loads.

See Codesandbox link. When the page loads, you can see red text appearing on the page which shouldn't be there.

As far as I understand the issue, `` element gets injected after the component renders and not before — I tried console-logging the `<style>` element and it is indeed not there when the functional component (`Styled`) get called the first time.

This does not affect the app behavior unless a reflow is triggered. Upon reflow, the browser apparently "remembers" the default style values (in my case `opacity: 1`) and then applies transitions once JSS's `<style>` is injected.
I my example, I added a call to `getComputedStyle` (which triggers reflow) and put it in `componentDidUpdate` method of a class component, which is rendered but outputs nothing. For some reason I was unable to reproduce this using hooks.

__The bug was introduced in 10.0.0.__ Downgrading to 9.8.7 resolves the issue.

__Codesandbox link:__
https://codesandbox.io/s/jolly-booth-82tke

__Versions (please complete the following information):__
- jss: 10.1.1
- Browser [e.g. chrome, safari]: Chrome 80, Firefox 74, Edge 18
- OS [e.g. Windows, macOS]: Windows