Почему при использовании onBlur, react-hook-form не правильно валидирует?

Если не использовать в данном компоненте onBlur всё работает, но он мне нужен.

То есть при нажатии на input появляется класс, а при нажатии на другую область убирается класс. Также следует учитывать есть ли value.

export const AuthInput: React.FC<AuthInputProps> = ({
  name,
  icon,
  label,
  isPassword,
}) => {
  const [focus, setFocus] = React.useState(false);
  const [value, setValue] = React.useState("");
  const [showPassword, setShowPassword] = React.useState(false);

  const {
    register,
    formState: { errors },
  } = useFormContext();

  return (
    <>
      <div
        className={`input formInput ${focus ? "focus" : ""} ${
          !focus && value ? "value" : ""
        } ${isPassword ? "password" : ""}`}
      >
        <svg width="20" height="20">
          <use xlinkHref={`../img/icons/icons.svg#${icon}`} />
        </svg>
        <label>{label}</label>
        <input
          {...register(name)}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onFocus={() => setFocus(true)}
          onBlur={() => setFocus(false)}
          name={name}
          type={isPassword && !showPassword ? "password" : "text"}
        />
        {focus && value && (
          <>
            <svg
              onClick={() => setValue("")}
              className="close"
              width="20"
              height="20"
            >
              <use xlinkHref="../img/icons/icons.svg#close" />
            </svg>
            {isPassword && (
              <svg
                onClick={() => setShowPassword(!showPassword)}
                className="eye"
                width="20"
                height="20"
              >
                <use
                  xlinkHref={`../img/icons/icons.svg#${
                    !showPassword ? "eye" : "fire"
                  }`}
                />
              </svg>
            )}
          </>
        )}
      </div>
      <div className="error">{errors[name]?.message}</div>
    </>
  );
};