Multiple reCaptcha on same page

I have multiple forms on one page. I am trying to get the invisible Google reCaptcha working for each form.

I get the reCaptcha badge for the first form. But the second form I don't see it. When I find it in the Google inspector it looks like it's off the page. I'm implementing both of them in the same way.

Any help would be appreciated.

I'm using the following reCaptcha script:

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

The recaptcha's are setup as follows:

let recaptchaId1;
let recaptchaId2;

var CaptchaCallback = function () {
    recaptchaId1 = grecaptcha.render("RecaptchaContact", {
    sitekey: "my recaptcha key",
    size: "invisible",
    callback: correctCaptcha_contact,
    badge: "bottomleft",
  });
  
    recaptchaId2 = grecaptcha.render("RecaptchaMaintenance", {
    sitekey: "my recaptcha key",
    size: "invisible",
    callback: correctCaptcha_maintenance,
    badge: "bottomleft",
  });
};

and the reCaptcha HTML for the forms is like this:

<!--Contact Us Form Recaptcha-->
<div class="g-recaptcha" id="RecaptchaContact"></div>
<input type="hidden" class="hiddenRecaptcha" name="cuf_hiddenRecaptcha" id="cuf_hiddenRecaptcha">

<!--Maintenance Request Form Recaptcha-->
<div class="g-recaptcha" id="RecaptchaMaintenance"></div>
<input type="hidden" class="hiddenRecaptcha" name="mrf_hiddenRecaptcha" id="mrf_hiddenRecaptcha">

Note: the HTML sections are placed inside each of the html for each form.

Do you a problem with this implementation? What might be causing an issue?