captcha rendering on partners page

src/components/sections/blog/search/icon.tsx

@@ -4,7 +4,7 @@ const SearchIcon = ({ className }: { className?: string }) => (
     height={22}
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...className}
+    {...(typeof className === 'object' ? className : {})}
   >
     <path
       d="M9.313 16.625A7.312 7.312 0 1 0 9.313 2a7.312 7.312 0 0 0 0 14.625Z"

src/components/sections/contact/form/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 // eslint-disable-next-line import/no-named-as-default
-import ReCAPTCHA from 'react-google-recaptcha'
 import Select from 'react-select'
 
 import { Container } from '~/components/layout/container'
@@ -128,11 +127,6 @@ const CustomForm = ({ data }: FormProps) => {
             onChange={(e) => setText(e.target.value)}
           ></textarea>
         </label>
-        {/* <ReCAPTCHA
-          siteKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
-          size="invisible"
-          ref={reRef}
-        /> */}
         <Button size="medium" variant="primary">
           {data?.formLabelButton}
         </Button>

src/components/sections/partners/contact/contact.module.scss

@@ -188,6 +188,12 @@
               border: none;
               color: var(--color-white);
             }
+
+            .recaptcha {
+              display: flex;
+              flex-direction: column;
+              background-color: black;
+            }
           }
 
           select {

src/components/sections/partners/contact/index.tsx

@@ -1,4 +1,6 @@
 import { useState } from 'react'
+// eslint-disable-next-line import/no-named-as-default
+import ReCAPTCHA from 'react-google-recaptcha'
 import Select from 'react-select'
 
 import Line from '~/components/icons/line'
@@ -54,6 +56,7 @@ const CustomForm = ({ data }: FormProps) => {
   const [errorMsg, setErrorMsg] = useState('')
   const [isFormSent, setIsFormSent] = useState(false)
   const [isSending, setIsSending] = useState(false)
+  // const reRef = useRef<ReCAPTCHA>()
 
   const handleSubmit = async (e: any) => {
     e.preventDefault()
@@ -78,6 +81,8 @@ const CustomForm = ({ data }: FormProps) => {
         role: role
       }
 
+      // const token = await reRef.current.executeAsync()
+
       await fetch(`${process.env.NEXT_PUBLIC_API}/api/inquiry`, {
         method: 'POST',
         mode: 'no-cors',
@@ -190,6 +195,15 @@ const CustomForm = ({ data }: FormProps) => {
             onChange={(e) => setText(e.target.value)}
           ></textarea>
         </label>
+        <script
+          src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
+          async
+          defer
+        ></script>
+        <ReCAPTCHA
+          className="recaptcha"
+          sitekey="6LcJ5LkhAAAAAJ841sJnn6LkwOg-5vt33X-wGEJW"
+        />
         <Button size="medium" variant="primary">
           {data?.contactButtonLabel}
         </Button>