adjusted css to object-fit cover

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

@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import { ReCAPTCHA } from 'react-google-recaptcha'
 import Select from 'react-select'
 
 import { Container } from '~/components/layout/container'
@@ -39,6 +40,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()
@@ -59,6 +61,8 @@ const CustomForm = ({ data }: FormProps) => {
         inquiry: selectedOption.value
       }
 
+      const token = await reRef.current.executeAsync()
+
       await fetch(`${process.env.NEXT_PUBLIC_API}/api/contact`, {
         method: 'POST',
         mode: 'no-cors',
@@ -123,6 +127,11 @@ 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/lib/renderer/blog.module.scss

@@ -145,6 +145,7 @@
 
   > img {
     object-fit: cover;
+    height: 100%;
     width: 100%;
   }
 }