How to handle multiple recaptcha in ejs webpage

I having trouble if i having multiple recaptcha field on two different forms issue when i remove recaptcha div from one form the other is working perfectly but having two only takes the second form captcha value.

<div class="col-12 btn-box">
                  <div class="g-recaptcha contact-recaptcha" id="recaptchaElementId" data-sitekey="site_key" data-action="contactForm"></div>
                </div>

this div is present in one contact page form

<div class="col-12 btn-box" style="margin-top: 20px;">
                <div class="g-recaptcha" id="demo-recaptcha" data-sitekey="site_key" data-action="demoRequest"></div>
              </div>

this one in the modal form


Also site key is same for both the div's

<script>
  function setupFormAndRecaptcha(formId, recaptchaElementId, siteKey) {
    // Render the ReCAPTCHA widget and set up the callback
    var recaptchaWidgetId = grecaptcha.render(recaptchaElementId, {
      sitekey: siteKey,
      callback: function (response) {
        console.log("ReCAPTCHA response received: " + response);
        submitFormWithToken(formId, response);
      },
    });

    // Function to handle form submission with ReCAPTCHA token
    function submitFormWithToken(formId, token) {
      const form = document.getElementById(formId);
      if (form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
        console.log("Form is valid, submitting with token:", token);
        formSubmitApi(formId, token);
      }
    }
  }
</script>

but i am getting issue like reCAPTCHA couldn’t find user-provided function: onloadCallback i am using cdn like

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>