Type-safe react hook to use yup validation resolver with react-hook-form

useYupValidationResolver.ts

import { useCallback } from 'react';
import { object, ValidationError } from 'yup';

const useYupValidationResolver = (
  validationSchema: ReturnType<typeof object>
) =>
  useCallback(
    async (data) => {
      try {
        const values = await validationSchema.validate(data, {
          abortEarly: false,
        });

        return {
          values,
          errors: {},
        };
      } catch (errors) {
        if (errors instanceof ValidationError)
          return {
            values: {},
            errors: errors.inner.reduce(
              (allErrors, currentError) => ({
                ...allErrors,
                [currentError.path!]: {
                  type: currentError.type ?? 'validation',
                  message: currentError.message,
                },
              }),
              {}
            ),
          };

        throw new Error('Error trying to validate form schema');
      }
    },
    [validationSchema]
  );

export default useYupValidationResolver;

How to use it with RHF ?

How to use it with RHF ?

https://react-hook-form.com/advanced-usage/#CustomHookwithResolver

I get a warning on line 25 for Forbidden non-null assertion so can I suggest a minor update:

          return {
            values: {},
            errors: errors.inner.reduce(
              (allErrors, currentError) => ({
                ...allErrors,
                ...(currentError.path && {
                  [currentError.path]: {
                    type: currentError.type ?? "validation",
                    message: currentError.message,
                  },
                }),
              }),
              {}
            ),
          };