¿Cómo usar useRef con Typescript / Formik?

Question

Estoy pasando una refpropiedad a mi FieldInput personalizado que utilizo para la validación de Formik de mi formulario. Sin embargo, da algunos errores de TypeScript. Por ejemplo, en mi función:

    const handleSubmitForm = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {

    setShowFlatList(true);
    Keyboard.dismiss();
    helpers.resetForm();
    if (fieldRef && fieldRef.current){
          fieldRef.current.blur();}
    helpers.resetForm();
  };

Recibo un error en fieldRef.current eso Object is possibly 'undefined'.. Pensé que agregar la condición if lo solucionaría, pero no fue así. Además, cuando envío el formulario, recibo una advertencia de que

Warning: An unhandled error was caught from submitForm()
Error: "fieldRef.current.blur is not a function. (In 'fieldRef.current.blur()', 'fieldRef.current.blur' is undefined)" in handleSubmitForm 

De manera similar, en mi componente FieldInput personalizado donde uso ref={fieldRef}, obtengo un error que:

Type '{ ref: MutableRefObject<undefined>; setFieldTouched: (field: string, isTouched?: boolean | undefined, shouldValidate?: boolean | undefined) => void; handleChange: { ...; }; ... 4 more ...; placeholderText: string; }' is not assignable to type 'IntrinsicAttributes & FieldInputProps & { children?: ReactNode; }'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & FieldInputProps & { children?: ReactNode; }'.ts(2322)

¿Cómo puedo solucionarlos?

Aquí hay un cuadro de códigos:

https://snack.expo.io/@nhammad/jealous-beef-jerky-fix

Answer 1

Si observa los tipos genéricos actuales de su forwardRefmétodo, el primer parámetro es unknown. Simplemente cambie su método de entrada de firma a

export const FieldInput = React.forwardRef<Input, FieldInputProps>(...)

Typecript resolverá automáticamente el tipo correcto según el forwardReftipo de retorno del método.