Having warnings in addition to errors for validation in react hook form

[MAST1999]

We have a validation system in my current job which is very specific and we need to show some warnings to the user that their actions might be wrong and can have unwanted side effects.

I found this comment which was really helpful. But it was using an older version of the React Hook Form so I wrote an updated version and I just wanted to share that here so if anyone else has come up with better ideas, they can share them here or maybe have an easier time by using this updated version.

type PowerControllerProps<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = Omit<ControllerProps<TFieldValues, TName>, 'render'> &
  UseControllerProps<TFieldValues, TName> & {
    render: (args: {
      field: ControllerRenderProps<TFieldValues, TName>;
      fieldState: ControllerFieldState;
      formState: UseFormStateReturn<TFieldValues>;
      warning: string | boolean;
    }) => React.ReactElement;
    warn?: (value: string) => boolean | string;
  };

function PowerController<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>(props: PowerControllerProps<TFieldValues, TName>) {
  return (
    <Controller
      control={props.control}
      name={props.name}
      defaultValue={props.defaultValue}
      render={(innerProps) => {
        return props.render({
          ...innerProps,
          warning: props.warn ? props.warn(innerProps.field.value) : false,
        });
      }}
    />
  );
}