How to pass useForm type to reusable component properly ?

[abdulazizkhatamov]

since I am using any type for InputField props, i am getting TS7031: Binding element state, handleChange, handleBlur implicitly has an any type. type error... in my case, how I properly set types here ? you can check full code in github gist (below link).

I have tried
type Form = ReturnType but it is solving current issue but causing more type errors in my form

// Reusable input field component
const InputField = ({ form, name, label, placeholder, type = 'text' }: any) => (
  <form.Field name={name}>
    {({ state, handleChange, handleBlur }) => (
      <Field data-invalid={!state.meta.isValid}>
        <FieldLabel htmlFor={name}>{label}</FieldLabel>
        <Input
          id={name}
          type={type}
          placeholder={placeholder}
          value={state.value}
          onChange={(e) => handleChange(e.target.value)}
          onBlur={handleBlur}
          aria-invalid={!state.meta.isValid}
        />
        <FieldError errors={state.meta.errors} />
      </Field>
    )}
  </form.Field>
)

const form = useForm({
    defaultValues: {
      fullName: '',
      email: '',
      phone: '',
      source: '' as LeadSourceType,
      status: '' as LeadStatusType,
      priority: '' as PriorityType,
      userId: '',
      interestedCourses: [] as Array<string>,
    },
    validators: { onSubmit: createLeadSchema },
    onSubmit: ({ value }) => createLead(value),
  })

<InputField
            form={form}
            name="fullName"
            label="Full name"
            placeholder="John Doe"
          />

Full code: https://gist.github.com/abdulazizkhatamov/e7c6fbbecf92c3acf54a7744c3b17f3d
Image: