title: Typescript throws "is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }"
body: <p>I know this has been discussed at length, but not other SO solutions seem to work, or I fail at implementing them. </p>
  
  <p>I am brand new to typescript, and have the following:</p>
  
  <pre><code>import faker from "faker";
  import React from "react";
  import Index from "../components/Index";
  import List from "../components/List";
  
  interface Props {
    departments: [
      {
        id: number;
        name: string;
      }
    ];
  }
  
  const IndexPage: React.FunctionComponent&lt;Props&gt; = ({ departments }) =&gt; {
    return (
      &lt;&gt;
        &lt;Index /&gt;
        &lt;List departments={departments} /&gt;
      &lt;/&gt;
    );
  };
  
  export async function getStaticProps() {
    let departments: { id: number; name: string }[] = [];
  
    for (let i = 0; i &lt; 50; i += 1) {
      const name: string = await faker.company.companyName();
      departments = [...departments, { id: i, name }];
    }
  
    return {
      props: {
        departments,
      },
    };
  }
  
  export default IndexPage;
  </code></pre>
  
  <p>While I am not sure I even implemented TypeScript correctly, the compiler throws this error:</p>
  
  <p><code>Type '{ departments: [{ id: number; name: string; }]; }' is not assignable to type 'IntrinsicAttributes &amp; { children?: ReactNode; }'.
  Property 'departments' does not exist on type 'IntrinsicAttributes &amp; { children?: ReactNode; }'.</code></p>
  
  <p>The compiler underlines the departments prop on the <code>&lt;List&gt;</code> component.</p>
  
  <p>Why is this error being thrown, and how do I fix it?</p>