title: react final form add extra fields as props
body: <p>Hello I have two forms that are different by only one field. So I am thinking of create a common form component and pass only the extra field as an optional property.</p>
  <p>Common form:</p>
  <pre><code>import { Form as ReactFinalForm, Field } from &quot;react-final-form&quot;;
  import Form from 'react-bootstrap/Form';
  
  interface CommonFormProps {
      onSubmit: (values: any) =&gt; void;
      extraFields?: typeof Field[];
  }
  
  export default function CommonForm(props: CommonFormProps) {
      return (
            &lt;ReactFinalForm
              onSubmit={values =&gt; {
                props.onSubmit(values);
              }}
              render={({ handleSubmit, form, submitting, pristine, values}) =&gt; (
                &lt;Form onSubmit={handleSubmit}&gt;
                     // other fields
                   {props.extraFields}
                &lt;/Form&gt;
              )}
            /&gt;
      );
  }
  </code></pre>
  <p>Form that needs extra field</p>
  <pre><code>export default function FormB() {
      return (
          &lt;CommonForm
            extraFields={&lt;Field name=&quot;price&quot; validate={required} &gt;
                           {({ input, meta }) =&gt; (
                &lt;Form.Group as={Form.Row} controlId=&quot;price&quot;&gt;
                  &lt;Form.Label column sm={4}&gt;
                      Price
                  &lt;/Form.Label&gt;
                  &lt;Col sm={8}&gt;
                    &lt;Form.Control type=&quot;text&quot; {...input} /&gt;
                  &lt;/Col&gt;
                &lt;/Form.Group&gt;
              )}
            &lt;/Field&gt;}
        /&gt;
  );
  }
  </code></pre>
  <p>I have tried to define extraFields as typeof Field[] or typeof Field. It makes no difference and error is always</p>
  <blockquote>
  <p>Type 'Element' is not assignable to type '&lt;FieldValue = any, RP
  extends FieldRenderProps&lt;FieldValue, T&gt; = FieldRenderProps&lt;FieldValue,
  HTMLElement&gt;, T extends HTMLElement = HTMLElement&gt;(props:
  FieldProps&lt;...&gt;) =&gt; ReactElement&lt;...&gt;'.   Type 'Element' provides no
  match for the signature '&lt;FieldValue = any, RP extends
  FieldRenderProps&lt;FieldValue, T&gt; = FieldRenderProps&lt;FieldValue,
  HTMLElement&gt;, T extends HTMLElement = HTMLElement&gt;(props:
  FieldProps&lt;...&gt;): ReactElement&lt;...&gt;'.ts(2322) index.tsx(16, 5): The
  expected type comes fro</p>
  </blockquote>
  <p>Could anybody help get rid of this please?</p>