title: Warning: validateDOMNesting(...): <h1> cannot appear as a child of <h2> except it doesn't
body: <p>The elements appear to be nested correctly, yet the invalid nesting error persists. What gives? Other answers seemed to be pointing out a real nesting error...</p>
  <pre class="lang-js prettyprint-override"><code>  const screens = [
      &lt;Fragment key='input1'&gt;
        &lt;h1&gt;Screen Heading 1&lt;/h1&gt;
        &lt;h2&gt;Sub-Heading 1&lt;/h2&gt;
        &lt;input
          type='text'
          id='input1'
          onChange={onChange}
          value={contentData.input1}
        /&gt;
      &lt;/Fragment&gt;,
      &lt;Fragment key='input2'&gt;
        &lt;h1&gt;Screen Heading 2&lt;/h1&gt;
        &lt;h2&gt;Sub-Heading 2&lt;/h2&gt;
        &lt;input
          type='text'
          id='input2'
          onChange={onChange}
          value={contentData.input2}
        /&gt;
      &lt;/Fragment&gt;,
      &lt;Fragment key='input3'&gt;
        &lt;h1&gt;Screen Heading 3&lt;/h1&gt;
        &lt;h2&gt;Sub-Heading 3&lt;/h2&gt;
        &lt;input
          type='text'
          id='input3'
          onChange={onChange}
          value={contentData.input3}
        /&gt;
      &lt;/Fragment&gt;
    ]
  </code></pre>