title: Type 'StaticImageData' is not assignable to type 'string'
body: <p>I'm struggling with interfaces on my little learning NextJS and TypeScript project. I thought I had it sorted out but am dealing with an issue on my Header.tsx when it comes to my <code>src</code> prop on my <code>Header</code> component. I keep getting the following error messages</p>
  <blockquote>
  <p>Type 'StaticImageData' is not assignable to type 'string'. The
  expected type comes from property 'src' which is declared here on type
  'IntrinsicAttributes &amp; ILogo &amp; { children?: ReactNode; }'</p>
  </blockquote>
  <p>I'm still not full confident in understand children props and how to make them flow from parent to child which has made an error like this a bit frustrating.</p>
  <p>I've gone ahead and posted toe code below and welcome and suggestions both to solve the immediate problem, and ways to mitigate this in the future.</p>
  <p><strong>Header.tsx</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import Navbar from &quot;./Navbar/Navbar&quot;;
  import Logo from &quot;../Logo&quot;;
  import companyLogo from &quot;../../../public/assets/images/logo.png&quot;;
  import { ILogo } from &quot;../../types/headerType&quot;;
  
  const Header = () =&gt; {
    return (
      &lt;div className=&quot;container flex justify-between h-16 max-w-full bg-pink-400 h-100px&quot;&gt;
        &lt;Logo className=&quot;object-cover&quot; src={companyLogo} /&gt;
        &lt;Navbar /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Header;
  </code></pre>
  <p><strong>Logo.tsx</strong></p>
  <pre><code>import Image from &quot;next/image&quot;;
  import Link from &quot;next/link&quot;;
  import React, { FunctionComponent } from &quot;react&quot;;
  import { ILogo } from &quot;../types/headerType&quot;;
  
  const Logo: FunctionComponent&lt;ILogo&gt; = ({ src }) =&gt; {
    return (
      &lt;div&gt;
        &lt;Link href=&quot;/&quot;&gt;
          &lt;a&gt;
            &lt;Image
              src={src}
              alt=&quot;Logo&quot;
              className=&quot;object-cover cursor-pointer&quot;
              height=&quot;100px&quot;
              width=&quot;320px&quot;
              layout=&quot;intrinsic&quot;
            /&gt;
          &lt;/a&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    );
  };
  
  export default Logo;
  </code></pre>
  <p><strong>headerType.ts</strong></p>
  <pre><code>export interface ILogo {
    //   image: HTMLImageElement;
    src: string;
    className?: string;
  }
  </code></pre>