fix hcaptcha bugginess

components/Captcha/Captcha.tsx

@@ -1,12 +1,12 @@
 import { memo } from "react";
 import Head from "next/head";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
+import { useHasMounted } from "../../hooks/use-has-mounted";
 import { useTheme } from "../../hooks/use-theme";
 
 export type CaptchaProps = {
   size?: "normal" | "compact" | "invisible";
   theme?: "light" | "dark";
-  id?: string;
   className?: string;
 
   // callbacks pulled verbatim from node_modules/@hcaptcha/react-hcaptcha/types/index.d.ts
@@ -21,7 +21,8 @@ export type CaptchaProps = {
   /* eslint-enable @typescript-eslint/no-explicit-any */
 };
 
-const Captcha = ({ size = "normal", theme, id, className, ...rest }: CaptchaProps) => {
+const Captcha = ({ size = "normal", theme, className, ...rest }: CaptchaProps) => {
+  const hasMounted = useHasMounted();
   const { resolvedTheme } = useTheme();
 
   return (
@@ -32,15 +33,16 @@ const Captcha = ({ size = "normal", theme, id, className, ...rest }: CaptchaProp
       </Head>
 
       <div className={className}>
-        <HCaptcha
-          sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
-          reCaptchaCompat={false}
-          tabIndex={0}
-          size={size}
-          theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
-          id={id}
-          {...rest}
-        />
+        {hasMounted && (
+          <HCaptcha
+            sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
+            reCaptchaCompat={false}
+            tabIndex={0}
+            size={size}
+            theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
+            {...rest}
+          />
+        )}
       </div>
     </>
   );