React hook form email validation with API

I have a form that is using React hook forms. The form has an email address field that needs to be validated by our API if it is already in use. Because I have to make calls to the API I first need to ensure I do not repeatedly send requests, to mitigate this, I have a check that validates if an email is valid, I do this with the isEmail function in the validator package.

like this:

 <Controller
      name="emailAddress"
      control={control}
      rules={{
        required: "Enter your email address",
        validate: (value) =>
          validator.isEmail(value) || "Enter a valid email address",
      }}

Once I know I have a valid email I then make an API call to check if the email already exists, again, to reduce on how many calls the API gets to deal with, I use rxjs and do this:

const email = useRef<string>("");
email.current = watch("emailAddress", "");
const [emailAddress, setEmailAddress] = useState("");

const { data: emailExists, isLoading: emailExistsLoading } =
    useEmailExists(emailAddress);

const handleInit = () => {
    const searchSubscription = emailSubject
    .pipe(filter((x) => validator.isEmail(x)))
    .pipe(distinctUntilChanged())
    .pipe(debounce(() => timer(1000)))
    .pipe(subscribeOn(asapScheduler))
    .subscribe({
        next: (v: string) => handleEmailAddressChanged(v),
    });
    return () => {
    searchSubscription.unsubscribe();
    };
};


const handleDirtyEmailAddressChange = () => {
    emailSubject.next(email.current);
    queryClient.removeQueries("email");

};  


useEffect(handleInit, []);
useEffect(handleDirtyEmailAddressChange, [email.current]);



return(<div>
        <Controller
        name="emailAddress"
        control={control}
        rules={{
            required: "Enter your email address",
            validate: (value) =>
            (!(emailExists?.exists ?? false) ||
                "This email address is already in use") &&
            (validator.isEmail(value) || "Enter a valid email address"),
        }}
        ...
        </div>)

The challenge I have is; sometimes when a user enters an email address that exists emailExists?.exists from useEmailExists function shows true but the error will not show on my field. I do not understand where I am going wrong.