How to use react-hook-form's setValue etc about bulletproof-react HOT 2 OPEN

export const LoginForm = ({ onSuccess }: LoginFormProps) => {
  const { login, isLoggingIn } = useAuth();

  var setNewValue;

  const handleClick = () => {
    setNewValue('email', 'abc');
  }

  return (
    <div>
      <Form<LoginValues, typeof schema>
        onSubmit={async (values) => {
          await login(values);
          onSuccess();
        }}
        schema={schema}
      >
        {({ register, formState, setValue }) => (
          <>
            {(() => {
              setNewValue = setValue;
            })()}
            <Button onClick={handleClick}>Change Value</Button>
            <InputField
              type="email"
              label="Email Address"
              error={formState.errors['email']}
              registration={register('email')}
            />
            <div>
              <Button isLoading={isLoggingIn} type="submit" className="w-full">
                Log in
              </Button>
            </div>
          </>
        )}
      </Form>
    </div>
  );
};

import clsx from 'clsx';
import * as React from 'react';
import { UseFormReturn, SubmitHandler, UseFormProps, FieldValues } from 'react-hook-form';

type FormProps<TFormValues extends FieldValues> = {
  className?: string;
  onSubmit: SubmitHandler<TFormValues>;
  children: React.ReactNode;
  options?: UseFormProps<TFormValues>;
  id?: string;
  methods: UseFormReturn<TFormValues>;
};

const Form = <
  TFormValues extends Record<string, unknown> = Record<string, unknown>>({
  onSubmit,
  children,
  className,
  id,
  methods
}: FormProps<TFormValues>) => {
  return (
    <form
      className={clsx('', className)}
      onSubmit={methods.handleSubmit(onSubmit)}
      id={id}
    >
      {children}
    </form>
  );
};

export default Form;

import { zodResolver } from "@hookform/resolvers/zod";
import { Path, PathValue, UseFormProps, useForm } from "react-hook-form";
import { ZodType, ZodTypeDef } from "zod";

export const useHookForm = <
  TFormValues extends Record<string, unknown> = Record<string, unknown>,
  Schema extends ZodType<unknown, ZodTypeDef, unknown> = ZodType<
    unknown,
    ZodTypeDef,
    unknown
  >
>(
  schema: Schema,
  options?: UseFormProps<TFormValues>,
) => {
  const methods = useForm<TFormValues>({
    ...options,
    resolver: schema && zodResolver(schema),
  });

  const setValues = (valuesToSet: Partial<TFormValues>) => {
    Object.keys(valuesToSet).forEach((fieldName) => {
      methods.setValue(
        fieldName as Path<TFormValues>,
        valuesToSet[fieldName] as PathValue<TFormValues, Path<TFormValues>>
      );
    });
  };
  return { methods, setValues };
};

export const LoginForm = ({ onSuccess }: LoginFormProps) => {
  const { methods } = useHookForm<LoginValues, typeof schema>(schema);
  const { formState, control, setValue } = methods;

  const login = useLogin();
  const navigate = useNavigate();
  const { animate, callAfterAnimateFn } = useAnimateFn();

  const handleClick = () => {
    setValue('email', 'abc');
  }

  return (
    <AnimatePresence>
      {animate && (
        <motion.div {...animations}>
          <div className="card p-4 mt-4 mx-4">
            <Form<LoginValues>
              onSubmit={async (values) => {
                console.log(values);
                // values;
                // onSuccess();
                login.mutate(values, { onSuccess });
              }}
              methods={methods}
            >
              <InputField
                control={control}
                type={TextFieldTextType.TEXT}
                title="Email Address"
                error={formState.errors["email"]}
                name="email"
              />
              <InputField
                control={control}
                type={TextFieldTextType.PASSWORD}
                title="Password"
                error={formState.errors["password"]}
                name="password"
                wrapperClassName="mt-3"
              />
              <div className="d-flex justify-content-center">
                <Button
                  leftIcon={Locked}
                  isLoading={login.isLoading}
                  type="submit"
                  className="w-100 mt-3"
                >
                  Log In
                </Button>
              </div>
            </Form>
            <Link
              to="#"
              onClick={callAfterAnimateFn(() => navigate("/auth/forget"))}
              className="forget-link"
            >
              Forget Password
            </Link>
          </div>
          <p className="text-center mt-2">
            Don't have an account?{" "}
            <Link
              to="#"
              onClick={callAfterAnimateFn(() => navigate("/auth/register"))}
              className="forget-link"
            >
              Sign Up
            </Link>
          </p>
        </motion.div>
      )}
    </AnimatePresence>
  );
};