generalize solution of recaptcha reset

ui/shared/reCaptcha/ReCaptcha.tsx

@@ -8,6 +8,12 @@ interface Props {
 }
 
 const ReCaptchaInvisible = ({ disabledFeatureMessage }: Props, ref: React.Ref<ReCaptcha>) => {
+  const [ attempt, setAttempt ] = React.useState(0);
+
+  const handleChange = React.useCallback(() => {
+    setAttempt(attempt + 1);
+  }, [ attempt ]);
+
   if (!config.services.reCaptchaV2.siteKey) {
     return disabledFeatureMessage ?? null;
   }
@@ -15,8 +21,10 @@ const ReCaptchaInvisible = ({ disabledFeatureMessage }: Props, ref: React.Ref<Re
   return (
     <ReCaptcha
       ref={ ref }
+      key={ attempt }
       sitekey={ config.services.reCaptchaV2.siteKey }
       size="invisible"
+      onChange={ handleChange }
     />
   );
 };

ui/snippets/auth/screens/AuthModalScreenOtpCode.tsx

@@ -28,7 +28,6 @@ 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',
@@ -96,7 +95,6 @@ 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 ]);
@@ -113,7 +111,7 @@ const AuthModalScreenOtpCode = ({ email, onSuccess, isAuth }: Props) => {
           and enter your code below.
         </Text>
         <AuthModalFieldOtpCode isDisabled={ isCodeSending }/>
-        <ReCaptcha key={ resendAttempts } ref={ recaptcha.ref }/>
+        <ReCaptcha ref={ recaptcha.ref }/>
         <Button
           variant="link"
           display="flex"