title: Sending a React.FunctionComponent<React.SVGProps<SVGSVGElement>> as a prop to another component
body: <p>I'm attempting to import a React functionComponent from an SVG and then send that to another component as a prop to render that svg. With the setup below, this compiles fine, but eventually crashes when trying to render the svg in browser with:</p>
  
  <blockquote>
    <p>Error: Objects are not valid as a React child (found: object with keys {$$typeof, render}). If you meant to render a collection of children, use an array instead.</p>
  </blockquote>
  
  <p>Classes below are simplified. But the gist of what I'm trying to do is:</p>
  
  <p>In overlay.tsx:</p>
  
  <pre><code>import { ReactComponent as icon } from "/icon.svg";
  import CustomItem from "/customItem";
  
  const Overlay: React.FC&lt;OverlayProps&gt; = () =&gt; {
  
      return (
          &lt;div&gt;
              &lt;CustomItem icon={icon}/&gt;
          &lt;/div&gt;
      );
      export default Overlay;
  }
  </code></pre>
  
  <p>and in customItem.tsx:</p>
  
  <pre><code>import React from "react";
  
  export interface CustomItemProps {
      icon: React.FunctionComponent&lt;React.SVGProps&lt;SVGSVGElement&gt;&gt;;
  }
  
  const CustomItem: React.FC&lt;CustomItemProps&gt; = ({icon}) =&gt; {
  
      return (
          &lt;div&gt;
              {icon}
          &lt;/div&gt;
      );
  };
  
  export default ApplicationsDropdownItem;
  </code></pre>
  
  <p>I assume my problem is somewhere around the syntax of {icon}, but I can not for the life of me find out what I'm suppose to use instead.</p>