title: Use typescript interfaces for passed props in ReactJs
body: <p>I created this using typescript:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {FC} from 'react';
  interface Interface {
      name:string,
      age:number
  }
  const Home: React.FC&lt;Interface&gt; = (info) =&gt; {
      return (
          &lt;div&gt;
              &lt;h1&gt;{info.name}&lt;/h1&gt;
          &lt;/div&gt;
      );
  };
  
  export default Home;
  
  ///
  
  const info = {name:'Boris', age:45}
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Home info={info}/&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>...but i get an error from typescript:
  <code>Type '{ info: { name: string; age: number; }; }' is not assignable to type 'IntrinsicAttributes &amp; Interface &amp; { children?: ReactNode; }'.   Property 'info' does not exist on type 'IntrinsicAttributes &amp; Interface &amp; { children?: ReactNode; }'</code><br>Question: How to avoid this and why it appeared?</p>