Netlify CAPTCHA does not show up in form

Hi,

I am trying to integrate Netlify-provided reCAPTCHA 2 (not custom) (Netlify forms) in my GatsbyJS website.

I followed the steps provided there.

But the CAPTCHA does not show up there before the submit button, Why?

Contact form link (live): https://sohelahmed.site/contact

Code:

contact.tsx

/** @jsx jsx */
import { jsx, Styled } from "theme-ui";
import { MDXRenderer } from "gatsby-plugin-mdx";
import Layout from "@lekoarts/gatsby-theme-minimal-blog/src/components/layout";
import SEO from "@lekoarts/gatsby-theme-minimal-blog/src/components/seo";
import { Box, Flex, Button } from "@theme-ui/components";

import {
  Label,
  Input,
  Select,
  Textarea,
  Radio,
  Checkbox,
  Slider,
} from "theme-ui";

type PageProps = {
  data: {
    page: {
      title: string;
      //   title_2: string;
      slug: string;
      excerpt: string;
      body: string;
    };
  };
};

const Contact = ({ data: { page } }: PageProps) => {
  
  return (
    <Layout>
      <SEO title={page.title} description={page.excerpt} />
      <Styled.h2>{page.title}</Styled.h2>

      <section sx={{ my: 5 }}>
        <MDXRenderer>{page.body}</MDXRenderer>

        <Box
          as="form"
          netlify-honeypot="bot-field"          
          // rel="noopener noreferrer nofollow"
          method="POST"
          data-netlify="true"
          name="sohelahmed.site-contact"
          data-netlify-recaptcha="true"
        >
          <p hidden>
            <label>
              Don’t fill this out if you're human: <input name="bot-field" />
            </label>
          </p>
          <input
            type="hidden"
            name="form-name"
            value="sohelahmed.site-contact"
          />
          
          <Label htmlFor="name">Name (optional)</Label>
          <Input name="name" mb={3} />
          <Label htmlFor="email">Email Address</Label>
          <Input name="email" type="email" mb={3} required />
          <Label htmlFor="subject">Subject (optional)</Label>
          <Input name="subject" mb={3} />
          <Label htmlFor="message">Message</Label>
          <Textarea name="message" rows="6" mb={3} required />
          <Label htmlFor="file">File (optional)</Label>
          <Input
            name="attachment"
            mb={3}
            type="file"
            accept="audio/aac video/x-msvideo image/bmp application/x-bzip application/x-bzip2 text/csv application/msword application/vnd.openxmlformats-officedocument.wordprocessingml.document application/gzip image/gif image/jpeg audio/mpeg video/mpeg application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg video/ogg image/png application/pdf application/vnd.ms-powerpoint application/vnd.openxmlformats-officedocument.presentationml.presentation application/vnd.rar application/x-tar image/tiff text/plain audio/wav audio/webm video/webm image/webp application/vnd.ms-excel application/vnd.openxmlformats-officedocument.spreadsheetml.sheet application/zip video/3gpp audio/3gpp video/3gpp2 audio/3gpp2 application/x-7z-compressed video/mp4, video/x-matroska"
            // multiple
          />          
          <div data-netlify-recaptcha="true"></div>
          <Button>Submit</Button>
        </Box>
      </section>
    </Layout>
  );
};

export default Contact;

HTML generated on live site:

<form method="POST" name="sohelahmed.site-contact" data-netlify-recaptcha="true" class="css-vurnku" enctype="multipart/form-data">
    <p hidden="">
        <label>Don’t fill this out if you're human: <input name="bot-field" /></label>
    </p>
    <input type="hidden" name="form-name" value="sohelahmed.site-contact" /><label for="name" class="css-knfhfe">Name (optional)</label><input name="name" class="css-nlbb7l" /><label for="email" class="css-knfhfe">Email Address</label>
    <input type="email" name="email" required="" class="css-nlbb7l" /><label for="subject" class="css-knfhfe">Subject (optional)</label><input name="subject" class="css-nlbb7l" /><label for="message" class="css-knfhfe">Message</label>
    <textarea name="message" rows="6" required="" class="css-nlbb7l"></textarea><label for="file" class="css-knfhfe">File (optional)</label>
    <input
        type="file"
        name="attachment"
        accept="audio/aac video/x-msvideo image/bmp application/x-bzip application/x-bzip2 text/csv application/msword application/vnd.openxmlformats-officedocument.wordprocessingml.document application/gzip image/gif image/jpeg audio/mpeg video/mpeg application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg video/ogg image/png application/pdf application/vnd.ms-powerpoint application/vnd.openxmlformats-officedocument.presentationml.presentation application/vnd.rar application/x-tar image/tiff text/plain audio/wav audio/webm video/webm image/webp application/vnd.ms-excel application/vnd.openxmlformats-officedocument.spreadsheetml.sheet application/zip video/3gpp audio/3gpp video/3gpp2 audio/3gpp2 application/x-7z-compressed video/mp4, video/x-matroska"
        class="css-nlbb7l"
    />
    <div></div>
    <button class="css-zqk9vd">Submit</button>
</form>

I have also went through similar forum topic such as Recaptcha only showing on reload but did not get solution.

If any more info needed, feel free to ask.

Thanks

Edit:

I am facing 2 more problems:

  1. Google reCAPTCHA is shown for few seconds and then disappear when we hard reload the page
  2. The form is not submitted. Not in verified and spam submission both