title: Component rendering twice when called outside switch, inside router. Not using strictmode
body: <p>This is my Router component. I'm returning a routeless Component on top of my switch so it renders over top of every route. On initial load of the app (only initial load, not when rerouting), it renders &lt; Component /&gt; twice. It's a functional component that's just returning another component, based on a condition. I'm not using .strictMode.</p>
  <p>My App.js is just returning RouterApp wrapped in ThemeProvider from styled-components.</p>
  <p>Why is this rendering twice?</p>
  <pre><code>const RouterApp = (props) =&gt; {
  
    const renderPublicRoute = (path, ComponentToRender, exact = true) =&gt; {
      return (
        &lt;Route
          exact={exact}
          path={path}
          render={props =&gt; &lt;ComponentToRender {...props} /&gt;}
        /&gt;
      );
    }
  
  
    return (
      &lt;Router&gt;
        &lt;Component /&gt;     *&lt;---the culprit*
        &lt;Switch&gt;
          {renderPublicRoute('/path', OnboardingScreen)}
          {renderPublicRoute('/anotherpath', TermsScreen)}
           ....etc..etc...
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  }
  
  export default RouterApp;
  </code></pre>