You are running into this issue because @atlaskit/flag has a peer-dependency on styled-components version 3.2.6. That version is not compatible v4.
We are currently working on a separate effort to improve the performance of @atlaskit/flag. As part of this effort, we are replacing the styled-components with Emotion (see below). This would remove the peer-dependency on the CSS-in-JS library that is used internally.
We expect this to take a couple of weeks based on our estimations. Once refactor is done, you’ll no longer have the issue.
For now though, you can get around this problem by using styled-components v3.2.6. I cloned your code-sandbox and downgraded the version of styled-components and everything works as expected. You can check it out here
As for https://ecosystem.atlassian.net/browse/DS-6836 – we are settling for Emotion for now, but we are exploring other options that might provide better performance. But we don’t have any concrete plans or timelines on when that would happen.
Hope that answers your question. Apologies for any inconvenience.