title: Why are there two IonHeader tags in the blank project scaffold?
body: <p>I started an Ionic Framework project using this command: </p>
  
  <pre><code>ionic start myApp blank --type=react
  </code></pre>
  
  <p>The resulting <code>Home.tsx</code> file looks like this and includes two "almost" identical <code>&lt;IonHeader&gt;</code> tags.  From the <a href="https://ionicframework.com/docs/api/header" rel="nofollow noreferrer">IonHeader documentation</a>, it says:</p>
  
  <blockquote>
    <p>It's important to note that ion-header needs to be the one of the three root elements of a page</p>
  </blockquote>
  
  <p>My question is why there are two instances of <code>&lt;IonHeader&gt;</code> in the scaffolded <code>Home.tsx</code>? Running the app in the browser, there is only a single title visible.</p>
  
  <pre><code>import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
  import React from 'react';
  import ExploreContainer from '../components/ExploreContainer';
  import './Home.css';
  
  const Home: React.FC = () =&gt; {
    return (
      &lt;IonPage&gt;
        &lt;IonHeader&gt;
  
          &lt;IonToolbar&gt;
            &lt;IonTitle&gt;Blank&lt;/IonTitle&gt;
          &lt;/IonToolbar&gt;
        &lt;/IonHeader&gt;
        &lt;IonContent&gt;
          &lt;IonHeader collapse="condense"&gt;
            &lt;IonToolbar&gt;
              &lt;IonTitle size="large"&gt;Blank&lt;/IonTitle&gt;
            &lt;/IonToolbar&gt;
          &lt;/IonHeader&gt;
          &lt;ExploreContainer /&gt;
        &lt;/IonContent&gt;
      &lt;/IonPage&gt;
    );
  };
  </code></pre>