title: Type error when passing props to component
body: <p>Hello I have a type that looks like this:</p>
  <pre><code>type MenuItemType = { name: string; link: string };
  </code></pre>
  <p>Also an array of those types:</p>
  <pre><code>const menuItems: MenuItemType[] = [
      { name: &quot;FAQ&quot;, link: &quot;/faq&quot; },
      { name: &quot;Terms of use&quot;, link: &quot;/terms&quot; },
      { name: &quot;Cookie policy&quot;, link: &quot;/cookie-policy&quot; },
      { name: &quot;Privacy policy&quot;, link: &quot;/privacy-policy&quot; },
      { name: &quot;Subscription&quot;, link: &quot;/subscription&quot; },
  ];
  </code></pre>
  <p>And a component that takes some props that are of this same type:</p>
  <pre><code>function ListItem({ name, link }: MenuItemType) {
      return (
          &lt;li className=&quot;text-xs mr-14 last:mr-0&quot;&gt;
              &lt;Link href={link}&gt;
                  &lt;a&gt;{name}&lt;/a&gt;
              &lt;/Link&gt;
          &lt;/li&gt;
      );
  }
  </code></pre>
  <p>The ListItem Component is rendered in a map function, and this is where typescript is complaining.</p>
  <p><a href="https://i.stack.imgur.com/0v4DG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0v4DG.png" alt="enter image description here" /></a></p>
  <p>What am i doing wrong?</p>