title: what is the difference between ( )=>React.FC and ( )=>JSX.Element
body: <p>In React, it seems that I can declare a functional component or just a function returns a JSX element.
  What confusing me is I don't know the key difference between these two approaches.
  Is there anything only one approach can do while another can not?</p>
  
  <pre><code>import React from "react";
  
  type ItemProps = {
      id: number
      name: string
  }
  
  const Item: React.FC&lt;ItemProps&gt; = ({ id, name }) =&gt;
      (
          &lt;section&gt;
              my id is {id}
              my name is {name}
          &lt;/section&gt;
      )
  
  const item = ({ id, name }: ItemProps) =&gt;
      (
          &lt;section&gt;
              my id is {id}
              my name is {name}
          &lt;/section&gt;
      )
  
  export const Container = () =&gt;
      (
          &lt;section&gt;
              {item({ id: 1, name: "item-1" })}
              &lt;Item id={1} name={"item-1"} /&gt;
          &lt;/section&gt;
      )
  </code></pre>