Issue with Rendering Two reCAPTCHA Components Based on Conditional Login and Signup Forms in ReactJS

Question

I'm encountering an issue with integrating reCAPTCHA into my React app for both the login and signup pages. Initially, only one form (either login or signup) is displayed, and upon clicking the "Create Account" button, the login form hides, and the signup form shows up, and vice versa.

I've attempted to add individual reCAPTCHA components for each form, but I'm facing the following problems:

1. If I enable the login page, the reCAPTCHA loads for login, but not for signup.
2. If I do the same for the signup page, the reCAPTCHA loads for signup, but not for login.

Here's the code snippet of my component:

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import ReCAPTCHA from "react-google-recaptcha";
import CheckLogin from "./CheckLogin";

function LoginSignup() {
  const reCaptchaKey = process.env.REACT_APP_SITE_KEY;
  const loginEndpoint = process.env.REACT_APP_API_LOGIN_ENDPOINT;

  const [isLoginVerfied, setIsLoginVerified] = useState(false);
  const [isSignupVerfied, setIsSignupVerified] = useState(false);

  const [signupEmail, setSignupEmail] = useState('');
  const [signupPassword, setSignupPassword] = useState('');
  const [signupPasswordConfirm, setSignupPasswordConfirm] = useState('');
  const [signupName, setSignupName] = useState('');

  const [loginEmail, setLoginEmail] = useState('');
  const [loginPassword, setLoginPassword] = useState('');

  const [captchaValue, setCaptchaValue] = useState('');

  const [spinner, setSpinner] = useState(false);

  const [loginStatus, setLoginStatus] = useState(false);

  const [isLoginBlock, setIsLoginBlock] = useState(true);

  const navigate = useNavigate();

  const toggleLoginSignup = () => {
    setIsLoginBlock(prev => !prev);
  }

  const handleLoginSubmit = async (e) => {
    setSpinner(true)
    e.preventDefault();

    try {
      await fetch(loginEndpoint, {
        method: "POST",
        headers: new Headers({
          'Content-type': 'application/json',
          'recaptcha': captchaValue,
        }),
        body: JSON.stringify({
          username: loginEmail,
          userpassword: loginPassword
        }),
      }).then(async function (data) {
        let resJson = await data.text();
        localStorage.setItem('login', JSON.stringify({
          loginStatus: true,
          token: resJson
        }))
        setLoginStatus(true);
        setSpinner(false)
        navigate("/dashboard");
      });

    }
    catch (err) {
      console.error(err);
      setSpinner(false)
    }
  }

  const recaptchaLogin = (value) => {
    setCaptchaValue(value)
    setIsLoginVerified(true);
  }

  const recaptchaSignup = (value) => {
    setIsSignupVerified(true);
  }

  return (
    <div className="login-page-container">
      <CheckLogin />
      {isLoginBlock ? (
        <div className="login-block flex flex-col items-center justify-center">
          <div className="w-full max-w-4xl p-4 bg-white border border-gray-200 rounded-lg shadow-md sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700">
            {/* Rest of the login form code */}
            <ReCAPTCHA
              sitekey={reCaptchaKey}
              onChange={recaptchaLogin}
              id='login-recaptcha-container'
            />
            {/* Rest of the login form code */}
          </div>
        </div>
      ) : (
        <div className="flex flex-col items-center justify-center mx-3 my-3">
          <div className="w-full max-w-4xl p-4 bg-white border border-gray-200 rounded-lg shadow-md sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700">
            {/* Rest of the signup form code */}
            <ReCAPTCHA
              sitekey={reCaptchaKey}
              onChange={recaptchaSignup}
              id='signup-recaptcha-container'
            />
            {/* Rest of the signup form code */}
          </div>
        </div>
      )}
    </div>
  );
}

export default LoginSignup;

In this component, I've used the react-google-recaptcha npm package for reCAPTCHA implementation. The LoginSignup component handles the logic for displaying the login or signup form based on the isLoginBlock state.

Essentially, I want to render the appropriate reCAPTCHA component for each form without any conflicts or rendering issues. Can someone please help me identify the problem and provide a solution to properly display and work with the reCAPTCHA on both the login and signup forms? Thank you in advance for your assistance!