ResponsiveContext doesn't work with Gatsby SSR

I know this issue looks like a duplicate, but #2311 differs from this bug.

Steps to reproduce:

1. Install a Gatsby starter of your choice (default is fine)
2. Add Grommet and wrap the root file, e.g. index.js or layout.js (theme doesn’t matter)
3. Add ResponsiveContext.Consumer
4. Print the current size to the screen
5. Run npm run develop and resize the screen. Like expected the size value changes as the screen size does.
6. Run npm run build, open index.html from public folder and resize the screen. Now the size value remains medium on every screen size.

layout.js

import React from "react"
import { Grommet } from "grommet"
import PropTypes from "prop-types"
import { StaticQuery, graphql } from "gatsby"
import theme from "../themes/default"

import Header from "./header"
import "./layout.css"

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <Grommet theme={theme}>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div
          style={{
            margin: `0 auto`,
            maxWidth: 960,
            padding: `0px 1.0875rem 1.45rem`,
            paddingTop: 0,
          }}
        >
          <main>{children}</main>
          <footer>
            © {new Date().getFullYear()}, Built with
            {` `}
            <a href="https://www.gatsbyjs.org">Gatsby</a>
          </footer>
        </div>
      </Grommet>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

index.js

import React from "react"
import { Link } from "gatsby"
import { Heading, ResponsiveContext } from "grommet"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
    <ResponsiveContext.Consumer>
      {size => (
        <>
          <Heading>Hi people</Heading>
          <Heading level="2">{`Size: ${size}`}</Heading>
          <p>Welcome to your new Gatsby site.</p>
          <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
            <Image />
          </div>
          <Link to="/page-2/">Go to page 2</Link>
        </>
      )}
    </ResponsiveContext.Consumer>
  </Layout>
)

export default IndexPage

[oorestisime]

Do you have gatsby-plugin-styled-components installed?

[ShimiSun]

@pawelsas thanks for the update!