title: Typescript - 'No overload matches this call' when using fetched data and material-ui
body: <p>I practiced creating a dropdown menu with</p>
  <ol>
  <li>hardcoded array before trying to create a</li>
  <li>dropdown menu with an array retrieved with useSWR.</li>
  </ol>
  <p>I used this for the first practice: <a href="https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045" rel="nofollow noreferrer">https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045</a></p>
  <p>Instead of using the hardcoded <code>names</code> variable,I saved a fetched array as shown:</p>
  <pre><code>const { data, error } = useSWR(
      &quot;https://api.github.com/repos/vercel/swr&quot;,
      fetcher
  );
  if (error) return &lt;h1&gt;&quot;An error has occurred.&quot;&lt;/h1&gt;;
  if (!data) return &lt;h1&gt;&quot;Loading...&quot;&lt;/h1&gt;;
  const arr = data.topics; 
  </code></pre>
  <p>I rendered it as shown:</p>
  <pre><code>{arr.map((tag,id)=&gt; (
       &lt;MenuItem
            key={id}
            value={tag}
       &gt;
          {tag}
       &lt;/MenuItem&gt;
  ))}
  </code></pre>
  <p>To which I was given red underlines for the parameter that says the following when cursor is placed over the <code>tag</code> and <code>id</code> parameters.</p>
  <blockquote>
  <p>Parameter 'tag' implicitly has an 'any' type.ts(7006)</p>
  </blockquote>
  <p>I clicked on the suggested Quick fixes and now the MenuItem and its props are underlined.</p>
  <p>After Quick fixes it looks like this</p>
  <pre><code>{arr.map((tag: {} | null | undefined,id: React.Key | null | undefined)=&gt; (
       &lt;MenuItem
            key={id}
            value={tag}
       &gt;
           {tag}
       &lt;/MenuItem&gt;
  ))}
  </code></pre>
  <p>The message I get from hovering over the red underlines is</p>
  <blockquote>
  <p>No overload matches this call.   Overload 1 of 3, '(props: { href:
  string; } &amp; { autoFocus?: boolean | undefined; classes?:
  Partial | undefined; dense?: boolean | undefined;
  disabled?: boolean | undefined; disableGutters?: boolean | undefined;
  divider?: boolean | undefined; selected?: boolean | undefined; sx?:
  SxProps&lt;...&gt; | undefined; } &amp; Omit&lt;...&gt; &amp; CommonProps &amp; Omit&lt;...&gt;):
  Element', gave the following error.
  Type '{ children: {} | null | undefined; key: Key | null | undefined; value: {} | null | undefined; }' is not assignable to type
  'IntrinsicAttributes &amp; { href: string; } &amp; { autoFocus?: boolean |
  undefined; classes?: Partial | undefined; dense?:
  boolean | undefined; ... 4 more ...; sx?: SxProps&lt;...&gt; | undefined; }
  &amp; Omit&lt;...&gt; &amp; CommonProps &amp; Omit&lt;...&gt;'.
  Property 'value' does not exist on type 'IntrinsicAttributes &amp; { href: string; } &amp; { autoFocus?: boolean | undefined; classes?:
  Partial | undefined; dense?: boolean | undefined; ...
  4 more ...; sx?: SxProps&lt;...&gt; | undefined; } &amp; Omit&lt;...&gt; &amp; CommonProps
  &amp; Omit&lt;...&gt;'.   Overload 2 of 3, '(props: { component:
  ElementType; } &amp; { autoFocus?: boolean | undefined; classes?:
  Partial | undefined; dense?: boolean | undefined; ...
  4 more ...; sx?: SxProps&lt;...&gt; | undefined; } &amp; Omit&lt;...&gt; &amp; CommonProps
  &amp; Omit&lt;...&gt;): Element', gave the following error.
  Property 'component' is missing in type '{ children: {} | null | undefined; key: Key | null | undefined; value: {} | null | undefined;
  }' but required in type '{ component: ElementType; }'.   Overload
  3 of 3, '(props:
  DefaultComponentProps&lt;ExtendButtonBaseTypeMap&lt;MenuItemTypeMap&lt;{},
  &quot;li&quot;&gt;&gt;&gt;): Element', gave the following error.
  Type '{} | null | undefined' is not assignable to type 'string | number | readonly string[] | undefined'.
  Type 'null' is not assignable to type 'string | number | readonly string[] | undefined'.ts(2769) OverridableComponent.d.ts(17,
  7): 'component' is declared here. index.d.ts(2246, 9): The expected
  type comes from property 'value' which is declared here on type
  'IntrinsicAttributes &amp; { autoFocus?: boolean | undefined; classes?:
  Partial | undefined; dense?: boolean | undefined; ...
  4 more ...; sx?: SxProps&lt;...&gt; | undefined; } &amp; Omit&lt;...&gt; &amp; CommonProps
  &amp; Omit&lt;...&gt;'</p>
  </blockquote>
  <p><strong>What is the difference between mapping through a hardcoded array and an array fetched using useSRW?</strong> There were no red underline in the first example.</p>
  <p>The code works, but I am trying to understand how Typescript works. I also get this warning message in the console:</p>
  <blockquote>
  <p>react-dom.development.js:67 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.</p>
  </blockquote>