'Extending Formik React component without losing types in render function?

So with Formik if you use the render function it knows what initialValues you passed in and will throw an error if you attempt to access values off the formik props -

<Formik initialValues={{name: 'Bob', age: 32}}>
{({formik} => {
    console.log(formik.values.name);      // okay
    console.log(formik.values.notAValue); // error
})}
</Formik>

I'd like to create a wrapper around Formik, however no matter what I try (e.g. copying the types verbatim from the base Formik component) I always end up losing the type support (formik.values is typed as any instead of the type of initialValues).

Here's an example untyped wrapper -

const FormikWrapper(props)
{
    return (
        <div>
            <Formik {...props} />
        </div>
    );
}

Unfortunately that results in this

<FormikWrapper initialValues={{name: 'Bob', age: 32}}>
{({formik} => {
    console.log(formik.values.name);      // no error, but no type known
    console.log(formik.values.notAValue); // no error, but no type known
})}
</FormikWrapper>

Can anyone help with types that would actually carry across the type of initialValues? For reference here are the Formik types - https://github.com/jaredpalmer/formik/blob/master/packages/formik/src/Formik.tsx#L988-L991



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source