title: What TypeScript type should React children be set to?
body: <p>Here's my layout:</p>
  <pre><code>export default function Layout(children:any) {
    return (
      &lt;div className={`${styles.FixedBody} bg-gray-200`}&gt;
        &lt;main className={styles.FixedMain}&gt;
          &lt;LoginButton /&gt;
          { children }
        &lt;/main&gt;
  
        &lt;footer&gt;
          &lt;FooterNavigation /&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>And my app:</p>
  <pre><code>function MyApp({ Component, pageProps }) {
    return (
      &lt;Layout&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/Layout&gt;
    )
  }
  </code></pre>
  <p>To make my code a little cleaner, I'd like to set <code>Layout(children:any)</code> to an actual type instead of any, but I get this warning on my app page on Component when I change it to <code>Layout(children:ReactNode)</code>:</p>
  <blockquote>
  <p>TS2322: Type '{ children: Element; }' is not assignable to type
  'IntrinsicAttributes | (IntrinsicAttributes &amp; string) |
  (IntrinsicAttributes &amp; number) | (IntrinsicAttributes &amp; false) |
  (IntrinsicAttributes &amp; true) | (IntrinsicAttributes &amp;
  ReactElement&lt;...&gt;) | (IntrinsicAttributes &amp; ReactNodeArray) |
  (IntrinsicAttributes &amp; ReactPortal)'.   Type '{ children: Element; }'
  has no properties in common with type 'IntrinsicAttributes'.</p>
  </blockquote>
  <p>It makes sense then that I should set it to <code>Layout(children:IntrinsicAttributes) {</code> but when I do there's no option to import it. What should this be set to?</p>