title: TypeScript: Expected type comes from property 'children' which is declared on 'IntrinsicAttributes & Prop'
body: <p>I was working on a component that takes in a children prop that takes in an <code>img</code> element + another prop. But when I go on to use the component and pass all the props, I receive the following error:</p>
  <blockquote>
  <p>Type 'Element' has no properties in common with type 'Pick&lt;ImgHTMLAttributes, &quot;src&quot; | &quot;alt&quot;&gt;'.ts(2559)</p>
  </blockquote>
  <blockquote>
  <p>App.tsx(5, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes &amp; Props'</p>
  </blockquote>
  <p>Here is an example of my code (<a href="https://codesandbox.io/s/async-architecture-30q4s?file=/src/App.tsx" rel="nofollow noreferrer">Link to CodeSandbox</a>):</p>
  <pre><code>type Props = {
    children: Pick&lt;ImgHTMLAttributes&lt;HTMLImageElement&gt;, &quot;src&quot; | &quot;alt&quot;&gt;
    otherProp?: any
  }
  
  const Image = ({children, otherProp}: Props) =&gt; {
    return (
      &lt;picture&gt;
        ...
        {children}
      &lt;/picture&gt;
    )
  }
  </code></pre>
  <p>I honestly don't understand what <code>IntrinsicAttributes</code> is, I can see that it is extending my <code>Prop</code> with this other type <code>IntrinsicAttributes</code> but not sure why exactly. And also the errors seem to go away when I remove <code>otherProp</code>. An explanation would be really helpful.
  Thanks a lot.</p>