react final form add extra fields as props - reactjs

Question

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.
Common form:
import { Form as ReactFinalForm, Field } from "react-final-form";
import Form from 'react-bootstrap/Form';
interface CommonFormProps {
onSubmit: (values: any) => void;
extraFields?: typeof Field[];
}
export default function CommonForm(props: CommonFormProps) {
return (
<ReactFinalForm
onSubmit={values => {
props.onSubmit(values);
}}
render={({ handleSubmit, form, submitting, pristine, values}) => (
<Form onSubmit={handleSubmit}>
// other fields
{props.extraFields}
</Form>
)}
/>
);
}
Form that needs extra field
export default function FormB() {
return (
<CommonForm
extraFields={<Field name="price" validate={required} >
{({ input, meta }) => (
<Form.Group as={Form.Row} controlId="price">
<Form.Label column sm={4}>
Price
</Form.Label>
<Col sm={8}>
<Form.Control type="text" {...input} />
</Col>
</Form.Group>
)}
</Field>}
/>
);
}
I have tried to define extraFields as typeof Field[] or typeof Field. It makes no difference and error is always
Type 'Element' is not assignable to type '<FieldValue = any, RP
extends FieldRenderProps<FieldValue, T> = FieldRenderProps<FieldValue,
HTMLElement>, T extends HTMLElement = HTMLElement>(props:
FieldProps<...>) => ReactElement<...>'. Type 'Element' provides no
match for the signature '<FieldValue = any, RP extends
FieldRenderProps<FieldValue, T> = FieldRenderProps<FieldValue,
HTMLElement>, T extends HTMLElement = HTMLElement>(props:
FieldProps<...>): ReactElement<...>'.ts(2322) index.tsx(16, 5): The
expected type comes fro
Could anybody help get rid of this please?

Answer 1

Pass as a child, not a prop:
export default function FormB() {
return (
<CommonForm>
<Field name="price" validate={required} >
{({ input, meta }) => (
<Form.Group as={Form.Row} controlId="price">
<Form.Label column sm={4}>
Price
</Form.Label>
<Col sm={8}>
<Form.Control type="text" {...input} />
</Col>
</Form.Group>
)}
</Field>}
</CommonForm>);
}
Then use children
export default function CommonForm(props: CommonFormProps) {
return (
<ReactFinalForm
onSubmit={values => {
props.onSubmit(values);
}}
render={({ handleSubmit, form, submitting, pristine, values}) => (
<Form onSubmit={handleSubmit}>
// other fields
{props.children}
</Form>
)}
/>
);
}
children can be empty