Issue implementing google reCaptcha v3 in React + Vite + TS

I was trying to implement google recaptch v3 in my react app with a an express server, here's my implementation:

React (Frontend) :

import { GoogleReCaptcha, GoogleReCaptchaProvider, useGoogleReCaptcha } from 'react-google-recaptcha-v3';

const RECAPTCHA_SITE_KEY: string = 'Ive_added_my_generated_key_here';

export default function SignIn() {
    const { executeRecaptcha } = useGoogleReCaptcha();
    const [captchaValue, setCaptchaValue] = React.useState<string | null>(null);
    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        if (!validateInputs()) return;
        if (!executeRecaptcha) {
            console.warn("reCAPTCHA not yet available");
            setError('Please complete the CAPTCHA.');
            return;
        }
        try {

            const captchaResponse = await axios.post('http://localhost:3001/api/v1/verify-captcha', {
                token: captchaValue,
            });

            if (!captchaResponse.data.success) {
                setError('Captcha verification failed. Please try again.');
                return;
            }

        } catch (err) {
            console.error('Error during login:', err);
            // Optionally display error feedback to the user
            dispatch(showAlert({ message: "Login failed. Please try again.", severity: "error" }));
        }
    };
    export default function SignIn() {
        <GoogleReCaptchaProvider reCaptchaKey={RECAPTCHA_SITE_KEY}>
            <GoogleReCaptcha
                onVerify={token => {
                    setCaptchaValue(token);
                }}
            />
        </GoogleReCaptchaProvider>
    }
}

The issues i am facing are:

Hitting multiple APIs.
When i looked at the APIs, it is v2 (referring to api end point -> google.com/recaptcha/api2/reload?k=my_generated_key) even though i have implemented v3.

Solution

Resolved this by removing:

<GoogleReCaptcha
    onVerify={token => {
    setCaptchaValue(token);
    }}
/>

As it was getting triggered continuously, instead used:

const { executeRecaptcha } = useGoogleReCaptcha();

try {
    token = await executeRecaptcha();
    const captchaResponse = await axios.post('http://localhost:3001/api/v1/verify-captcha', {token: token,});
    if (!captchaResponse.data.success) {
        setError('Captcha verification failed. Please try again.');
        return;
    }
} catch (err) {
    console.error('Error during login:', err);
    // Optionally display error feedback to the user
    dispatch(showAlert({ message: "Login failed. Please try again.", severity: "error" }));
}