title: JSX Element Type Error: Adding Types to object returned from .map function
body: <p>I'm trying to add the <code>item</code> <strong>type to the object that is returned from the .map function</strong>. However, I'm getting a JSX error and I tried adding <code>item: JSX.Element</code> to the Item type, but that doesn't seem to work correctly. Can someone clarify this for me? Below is the error, types, and code.</p>
  
  <p><strong>Error:</strong></p>
  
  <pre><code>src/ListPicker.tsx:69:28 - error TS2345: Argument of type '(item: Item) =&gt; JSX.Element' is not assignable to parameter of type '(value: string, index: number, array: string[]) =&gt; Element'.
    Types of parameters 'item' and 'value' are incompatible.
      Type 'string' is not assignable to type 'Item'.
  
        {props.items.map((item: Item) =&gt; {
                                ~~~~~~~~~~~~~~~~~
  </code></pre>
  
  <p><strong>Types:</strong></p>
  
  <pre><code>// TypeScript: Types
  interface Props {
    title: string,
    items: Array&lt;string&gt;,
    onPress: Function,
    onValueChange: Function,
  }
  
  interface Item {
    label: string,
    value: string,
    key: number | string,
    color: string,
  };
  </code></pre>
  
  <p><strong>ListPicker.tsx:</strong></p>
  
  <pre><code>// Render iOS Picker
    const renderIOSPicker = () =&gt; {
      try {
        return (
          &lt;Picker
            selectedValue={value}
            onValueChange={selectValue}&gt;
            {props.items.map((item: Item) =&gt; {
              return (
                &lt;Picker.Item
                  label={item.label}
                  value={item.value}
                  key={item.key || item.label}
                  color={item.color}
                /&gt;
              );
            })}
          &lt;/Picker&gt;
        )
      }
      catch (error) {
        console.log(error);
      }
    };
  </code></pre>