title: React Material UI icon passed in props --> to jsx (Typescript)
body: <p>I use an icon from the library of material UI in React environment. I pass this icon as a property to child react element and I want to render it inside this child.</p>
  <p>So if in general you just need to:</p>
  <pre><code>import DeleteIcon from '@material-ui/icons/Delete';
  
  ...
  
  render(
         &lt;DeleteIcon/&gt;
  )
  </code></pre>
  <p>now I got it as a property within the child element, and this is my code for the child:</p>
  <pre><code>export const InteractiveListItem: React.FC&lt;{ Icon?: OverridableComponent&lt;SvgIconTypeMap&lt;{}, &quot;svg&quot;&gt;&gt; }&gt; = (props) =&gt; {
  
      return (
          {props.Icon}  ------&gt; not rendered!
      )
  </code></pre>
  <p><strong>How do I &quot;convert&quot; this ovverrideableComponent into acceptable ReactElement?</strong></p>