title: Render prop as a component to prevent change in the order of hooks
body: <p>I am wrapping every routed page in a top level component but the passed in <code>page</code> is a function (for reasons I cannot export components as is) so, in order to render them, I have to call their functions directly like so:</p>
  <pre><code>const RoutePageContainer = ({ title, page }) =&gt; {
    return (
      &lt;div className={styles.container}&gt;
        {title &amp;&amp; &lt;h3 className={styles.title}&gt;{title}&lt;/h3&gt;}
        &lt;div className={styles.page}&gt;{page()}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>This worked up until some point but now I am getting <code>Warning: React has detected a change in the order of Hooks</code> errors, which I believe is caused by this function call here, so I am trying to fix it.</p>
  <p><a href="https://kentcdodds.com/blog/dont-call-a-react-function-component" rel="nofollow noreferrer">Kent C. Dodds's blog post</a> describes the problem and how to fix it but I am not sure how I can render this page prop as a JSX element because it is dynamic. Passing it as a children prop also won't work. Is there any way to handle this?</p>