yupResolver: Control<T> incompatible with optional fields when passed to custom component

[jeremnds]

Version Number

5.2.2

Codesandbox/Expo snack

https://codesandbox.io/p/devbox/yup-resolvers-issue-f48tpn?file=%2Fsrc%2FApp.tsx%3A21%2C49

Steps to reproduce

1. Create a yup schema with at least one optional field
2. Infer the form type with yup.InferType<typeof schema>
3. Create a custom component that accepts control: Control<FormValues> as a prop
4. Pass control to that custom component

Expected behaviour

control returned by useForm({ resolver: yupResolver(schema) }) should be assignable to Control<yup.InferType<typeof schema>> when passed to a custom component typed as { control: Control<FormValues> }, without any cast

What browsers are you seeing the problem on?

Firefox

Relevant log output

Type 'Control<{ page: string; lang: string | undefined; }, unknown, { lang?: string | undefined; page: string; }>' is not assignable to type 'Control<{ lang?: string | undefined; page: string; }>'.
  The types of '_subjects.state' are incompatible between these types.
    Type 'FormStateSubjectRef<{ page: string; lang: string | undefined; }>' is not assignable to type 'FormStateSubjectRef<{ lang?: string | undefined; page: string; }>'.
      Type 'FormStateSubjectRef<{ page: string; lang: string | undefined; }>' is not assignable to type '{ readonly observers: Observer<Partial<FormState<{ lang?: string | undefined; page: string; }>> & { name?: string | undefined; values?: { lang?: string | undefined; page: string; } | undefined; type?: EventType | undefined; }>[]; subscribe: (value: Observer<...>) => Subscription; unsubscribe: Noop; }'.
        Types of property 'observers' are incompatible.
          Type 'Observer<Partial<FormState<{ page: string; lang: string | undefined; }>> & { name?: string | undefined; values?: { page: string; lang: string | undefined; } | undefined; type?: EventType | undefined; }>[]' is not assignable to type 'Observer<Partial<FormState<{ lang?: string | undefined; page: string; }>> & { name?: string | undefined; values?: { lang?: string | undefined; page: string; } | undefined; type?: EventType | undefined; }>[]'.
            Type 'Observer<Partial<FormState<{ page: string; lang: string | undefined; }>> & { name?: string | undefined; values?: { page: string; lang: string | undefined; } | undefined; type?: EventType | undefined; }>' is not assignable to type 'Observer<Partial<FormState<{ lang?: string | undefined; page: string; }>> & { name?: string | undefined; values?: { lang?: string | undefined; page: string; } | undefined; type?: EventType | undefined; }>'.
              Type 'Partial<FormState<{ lang?: string | undefined; page: string; }>> & { name?: string | undefined; values?: { lang?: string | undefined; page: string; } | undefined; type?: EventType | undefined; }' is not assignable to type 'Partial<FormState<{ page: string; lang: string | undefined; }>> & { name?: string | undefined; values?: { page: string; lang: string | undefined; } | undefined; type?: EventType | undefined; }'.
                Type 'Partial<FormState<{ lang?: string | undefined; page: string; }>> & { name?: string | undefined; values?: { lang?: string | undefined; page: string; } | undefined; type?: EventType | undefined; }' is not assignable to type '{ name?: string | undefined; values?: { page: string; lang: string | undefined; } | undefined; type?: EventType | undefined; }'.
                  Types of property 'values' are incompatible.
                    Type '{ lang?: string | undefined; page: string; } | undefined' is not assignable to type '{ page: string; lang: string | undefined; } | undefined'.
                      Type '{ lang?: string | undefined; page: string; }' is not assignable to type '{ page: string; lang: string | undefined; }'.
                        Property 'lang' is optional in type '{ lang?: string | undefined; page: string; }' but required in type '{ page: string; lang: string | undefined; }'.

Code of Conduct

• I agree to follow this project's Code of Conduct