Reset the reCAPTCHA after the user attempts to resend the OTP (#2645)

ui/snippets/auth/screens/AuthModalScreenOtpCode.tsx

@@ -28,6 +28,7 @@ const AuthModalScreenOtpCode = ({ email, onSuccess, isAuth }: Props) => {
   const toast = useToast();
   const recaptcha = useReCaptcha();
   const [ isCodeSending, setIsCodeSending ] = React.useState(false);
+  const [ resendAttempts, setResendAttempts ] = React.useState(0);
 
   const formApi = useForm<OtpCodeFormFields>({
     mode: 'onBlur',
@@ -95,6 +96,7 @@ const AuthModalScreenOtpCode = ({ email, onSuccess, isAuth }: Props) => {
         description: apiError?.message || getErrorMessage(error) || 'Something went wrong',
       });
     } finally {
+      setResendAttempts((prev) => prev + 1);
       setIsCodeSending(false);
     }
   }, [ apiFetch, email, formApi, toast, recaptcha ]);
@@ -111,7 +113,7 @@ const AuthModalScreenOtpCode = ({ email, onSuccess, isAuth }: Props) => {
           and enter your code below.
         </Text>
         <AuthModalFieldOtpCode isDisabled={ isCodeSending }/>
-        <ReCaptcha ref={ recaptcha.ref }/>
+        <ReCaptcha key={ resendAttempts } ref={ recaptcha.ref }/>
         <Button
           variant="link"
           display="flex"