<Field /> - Expose the props from custom component passed in

[johnsonav1992]

Bug report

Current Behavior

Currently, when using the Field component within a TypeScript React project, the custom component that gets passed to the "component" prop of Field does not have its own props exposed as props of the Field component via autocomplete. In other words, there is no autocomplete for any of the custom props of the component being passed in and it is easy to encounter bugs when passing in props that don't exist or misspelling them, etc.

Expected behavior

I would expect that the Field component to take in the inferred props from the custom component and expose them as part of the combined props of the Field component itself and be able to get better TypeScript support for all of the combined props of both Field and its passed component.

Reproducible example

In this code sandbox you can remove that custom component "labelText" prop and if you go to add it back, you get no autocomplete. And for that matter, you don't get autocomplete on any of Field's normal props either.

https://codesandbox.io/s/formik-typescript-forked-sk2tzy?file=/src/App.tsx

Suggested solution(s)

Make the Field component a generic component, where it essentially infers the props of the component that gets passed into it and includes those props as part of its own. Here are some images of a VERY basic idea of how this would work... (notice the autocomplete you get and the TS errors that get throw if certain props aren't passed)

Additional context

N/A

Your environment

Software	Version(s)
Formik	2.2.9
React	17.0.2
TypeScript	5.0.0
Browser	Chrome 119.0.6045.123
npm/Yarn	8.15.0
Operating System	MacOs Ventura 13.0