Q: conflict when extends interface with react-final-form FieldRenderProps in typescript Hi
I try to create custom react function component to pass it to
react-final-form Field as a component but get an error.
details
The Form
import {Form as FinalForm, Field} from 'react-final-form';
import { Form} from 'semantic-ui-react';

<Form onSubmit={handleSubmit}>
    <Field placeholder='Venue' value={activity.venue} name={'TEST FIELD'} component={TestInput} />
</Form>

TestInput function component
import React from 'react';
import {FieldRenderProps} from "react-final-form";

const TestInput : React.FC<FieldRenderProps<string, HTMLInputElement>> = ({}) => {
  return (
    <div>
      HI HI TEST
    </div>
  );
};

Now there is an error at 
component={TestInput} say that : ... type is not assignable to ... lab lab
error message
I know why this problem occurs, this because of the definition of component
component?: React.ComponentType<T> | SupportedInputs;
type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
type FC<P = {}> = FunctionComponent<P>;

// Here : T extends => HTMLElement 
export interface FieldRenderProps<FieldValue, T extends HTMLElement = HTMLElement> {
  input: FieldInputProps<FieldValue, T>;
  meta: FieldMetaState<FieldValue>;
}



So why i can not use HtmlInputElelemnt Although its defention : 
interface HTMLInputElement extends HTMLElement
Now when I replace HTMLInputElement with HtmlElement everything work correctly 
const TestInput: React.FC<FieldRenderProps<string, HTMLElement>> = ({ }) => 

Now I just pass this by mark this line with @ts-ignore
to ignore it! but where is the problem?
Update
I Test this code on CodeSandBox but no errors at all
But with Visual studio code, visual studio, all JetBrains IDEs, the error still appear ???
Notice: This code also works for me but only when I use @ts-ignore
Update [Partailly Solved]
I solve the problem, just remove "strict": true from tsconfig.json solve the problem!.
But
The Demo project CodeSandBox strict mode work without any problem ??

A: I had the same problem today; I downgraded the versions of react-final-form and final-form and now it's working. Probably it's just a bug or something.
npm install react-final-form@6.3.0 final-form@4.16.1
Those are the versions I'm using to make it work.

A: Well, for one, you should not be specifying a value prop unless you are using a radio button or a checkbox.
What if you specify the field type in the <Field/> component like so?
<Field<string> 
//    ^^^^^^^^-------- LIKE THIS
  name={'TEST FIELD'}
  placeholder='Venue' 
  component={TestInput} />

That might help.
