ReCaptcha implementation still says “please verify that you’re not a robot” even if it is checked

I have implemented ReCaptcha into a SweetAlert alert box. Checking the box to confirm I’m not a robot shows the SweetAlert warning to still verify that I am not a robot.

HTML code to launch the SweetAlert

<form id="request_quote" method="POST" action="quoterequest.php">
<input type = hidden id = "...." value = "..."
<button id="quoteButton" class="mt-4 qbutton btn btn-outline-primary" type="submit">Request Print</button>
</form>

Javascript:

<script type="text/javascript">
$(document).ready(function() {
  $("#request_quote").submit(function(e) {
    e.preventDefault();
    Swal.fire({
      title: 'Please enter your email',
      input: 'email',
      inputAttributes: {
        autocapitalize: 'off'
      },
      html: '<div id="recaptcha"></div>',
      didOpen: () => {
        grecaptcha.render('recaptcha', {
          'sitekey': 'SITE_KEY'
        });
      },
      preConfirm: function () {
        if (grecaptcha.getResponse().length === 0) {
          Swal.showValidationMessage(`Please verify that you're not a robot`)
        }
      }
    }).then(function(result) {
      if (result.isConfirmed) {
       ...rest of code

I followed the documentation from the SweetAlert recipe site for adding ReCaptcha onto the alert itself, but something is going wrong with how I implemented it and currently the script is unable to be executed as the alert box still says to verify that I am a human.

Result