title: gatsby-react-helmet generating empty <title> on SSR
body: <p>My Gatsby website is not generating proper title tags on SSR. When I build the website all I get on my generated files are <code>&lt;title data-react-helmet="true"&gt;&lt;/title&gt;</code>. I'd appreciate help to find the problem and solve as I have no idea which might be the issue after a long debugging process.</p>
  
  <p>Relevant files:</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>...
  "dependencies": {
    "gatsby": "^2.19.45",
    "gatsby-image": "^2.2.44",
    "gatsby-plugin-manifest": "^2.2.48",
    "gatsby-plugin-react-helmet": "^3.2.2",
    "gatsby-plugin-sharp": "^2.4.13",
    "gatsby-plugin-sitemap": "^2.3.1",
    "gatsby-plugin-typescript": "^2.3.3",
    "gatsby-source-filesystem": "^2.1.56",
    "gatsby-source-graphql": "^2.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0",
  }
  ...
  </code></pre>
  
  <p><strong>gatsby.config.js</strong></p>
  
  <pre><code>  plugins: [
      `gatsby-plugin-react-helmet`,
      ...
    ]
  </code></pre>
  
  <p><em>(gatsby-plugin-offline is disabled)</em></p>
  
  <p>Seo.tsx</p>
  
  <pre><code>import React from "react"
  import { Helmet } from "react-helmet"
  import { useStaticQuery, graphql } from "gatsby"
  
  interface Props {
    title: string
    description?: string
    image?: string
  }
  
  const SEO = ({ title, description, image }: Props) =&gt; {
    const { site } = useStaticQuery(
      graphql`
        query {
          site {
            siteMetadata {
              title
              description
              image
              siteUrl
            }
          }
        }
      `
    )
  
    const metaDescription = description || site.siteMetadata.description
    const shareImage = image || site.siteMetadata.image
    const url = site.siteMetadata.siteUrl
  
    return (
      &lt;Helmet defer={false}&gt;
        &lt;title&gt;{title}&lt;/title&gt;
        &lt;meta name="description" content={metaDescription} /&gt;
        &lt;meta name="image" content={shareImage} /&gt;
        &lt;link rel="canonical" href={url} /&gt;
        &lt;meta property="og:url" content={url} /&gt;
        &lt;meta property="og:type" content="website" /&gt;
        &lt;meta property="og:title" content={title} /&gt;
        &lt;meta property="og:description" content={metaDescription} /&gt;
        &lt;meta property="og:image" content={shareImage} /&gt;
        &lt;meta name="twitter:card" content="summary_large_image" /&gt;
        &lt;meta name="twitter:title" content={title} /&gt;
        &lt;meta name="twitter:description" content={metaDescription} /&gt;
        &lt;meta name="twitter:image" content={shareImage} /&gt;
      &lt;/Helmet&gt;
    )
  }
  
  export default SEO
  </code></pre>
  
  <p>Changing the <code>&lt;title&gt;{title}&lt;/title&gt;</code> to <code>&lt;Helmet title={title}&gt;</code> or either removing <code>defer={true}</code> won't change anything in the result.</p>
  
  <p><strong>gatsby-ssr.js</strong></p>
  
  <pre><code>import React from "react"
  import { Helmet } from "react-helmet"
  
  export const onRenderBody = (
    { setHeadComponents, setHtmlAttributes, setBodyAttributes },
    pluginOptions
  ) =&gt; {
    const helmet = Helmet.renderStatic()
    setHtmlAttributes(helmet.htmlAttributes.toComponent())
    setBodyAttributes(helmet.bodyAttributes.toComponent())
    setHeadComponents([
      helmet.title.toComponent(),
      helmet.link.toComponent(),
      helmet.meta.toComponent(),
      helmet.noscript.toComponent(),
      helmet.script.toComponent(),
      helmet.style.toComponent()
    ])
  }
  </code></pre>
  
  <p><em>I still have problems with an empty srr file.</em></p>
  
  <p>On any given page I call the SEO tag, for example:</p>
  
  <pre><code>&lt;SEO title="Hello World" description="Foo Bar" /&gt;
  </code></pre>