title: conflict when extends interface with react-final-form FieldRenderProps in typescript
body: <h3>Hi</h3>
  
  <p>I try to create custom react function component to pass it to
  react-final-form Field as a component but get an error.</p>
  
  <h3>details</h3>
  
  <p>The Form</p>
  
  <pre><code>import {Form as FinalForm, Field} from 'react-final-form';
  import { Form} from 'semantic-ui-react';
  
  &lt;Form onSubmit={handleSubmit}&gt;
      &lt;Field placeholder='Venue' value={activity.venue} name={'TEST FIELD'} component={TestInput} /&gt;
  &lt;/Form&gt;
  </code></pre>
  
  <p>TestInput function component</p>
  
  <pre><code>import React from 'react';
  import {FieldRenderProps} from "react-final-form";
  
  const TestInput : React.FC&lt;FieldRenderProps&lt;string, HTMLInputElement&gt;&gt; = ({}) =&gt; {
    return (
      &lt;div&gt;
        HI HI TEST
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Now there is an error at 
  <code>component={TestInput}</code> say that : ... type is not assignable to ... lab lab</p>
  
  <p><a href="https://i.stack.imgur.com/wIjyo.png" rel="nofollow noreferrer">error message</a></p>
  
  <p>I know why this problem occurs, this because of the definition of component</p>
  
  <pre><code>component?: React.ComponentType&lt;T&gt; | SupportedInputs;
  type ComponentType&lt;P = {}&gt; = ComponentClass&lt;P&gt; | FunctionComponent&lt;P&gt;;
  type FC&lt;P = {}&gt; = FunctionComponent&lt;P&gt;;
  
  // Here : T extends =&gt; HTMLElement 
  export interface FieldRenderProps&lt;FieldValue, T extends HTMLElement = HTMLElement&gt; {
    input: FieldInputProps&lt;FieldValue, T&gt;;
    meta: FieldMetaState&lt;FieldValue&gt;;
  }
  
  
  </code></pre>
  
  <p>So why i can not use HtmlInputElelemnt Although its defention : </p>
  
  <p><code>interface HTMLInputElement extends HTMLElement</code></p>
  
  <p>Now when I replace HTMLInputElement with HtmlElement everything work correctly </p>
  
  <pre><code>const TestInput: React.FC&lt;FieldRenderProps&lt;string, HTMLElement&gt;&gt; = ({ }) =&gt; 
  </code></pre>
  
  <p>Now I just pass this by mark this line with <code>@ts-ignore</code>
  to ignore it! but where is the problem?</p>
  
  <h3>Update</h3>
  
  <p>I Test this code on <a href="https://codesandbox.io/s/heuristic-leakey-gfz8b" rel="nofollow noreferrer">CodeSandBox</a> but no errors at all
  But with Visual studio code, visual studio, all JetBrains IDEs, the error still appear ???</p>
  
  <p>Notice: This code also works for me but only when I use @ts-ignore</p>
  
  <h2>Update [Partailly Solved]</h2>
  
  <p>I solve the problem, just remove <code>"strict": true</code> from <code>tsconfig.json</code> solve the problem!.</p>
  
  <h3>But</h3>
  
  <p>The Demo project <a href="https://codesandbox.io/s/heuristic-leakey-gfz8b" rel="nofollow noreferrer">CodeSandBox</a> strict mode work without any problem ??</p>