How to set react-final-form onSubmit values param type TypeScript

Question

How can I set change the value type of onSubmit in react-final-form.

inteface IValues {
    name: string;
}
<Form onSubmit={(values: IValues) => {}}>   // Error happens here
//    Types of parameters 'values' and 'values' are incompatible.
//    Type '{}' is missing the following properties from type 'IFormValues': name

---

This works but I can't get the value.name

<Form onSubmit={(values: object) => {
    // Property 'name' does not exist on type 'object'
    values.name
}}>

---

I can cast to IValues as below to extract name.

<Form onSubmit={(values: object) => {
    const { name } = values as IValues;
}}>

onSubmit is from Config, I tried finding how to set FormData type but couldn't find one. Is there anyway I can set FormData in jsx? And is there any other option I can do better?

Answer 1

react-final-form supports value typing as of version 6.1.0.

You can achieve it by simply providing generic type to Form component.

import { withTypes } from 'react-final-form'

inteface IValues {
    name: string;
}

const { Form } = withTypes<IValues>()

<Form onSubmit={(values: IValues) => {}}>