Improve the way this is hidden

src/app/verify-code/page.tsx

@@ -20,33 +20,34 @@ export default function CaptchaCodePage () {
       <p className='mb-4 px-8 -mt-2 text-center'>
         Verify you are human to get a code
       </p>
-      <Turnstile
-        siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
-        onSuccess={async token => {
-          setToken(token)
-          setResult(0)
-          try {
-            const result = await axios.post('/api/get-verify-code', {
-              token
-            })
-            if (result.data.success) {
-              setCode(result.data.data)
-              setResult(2)
-            } else {
-              if (result.data.message) {
-                setResultMsg(result.data.message)
+      {result == -1 && (
+        <Turnstile
+          siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
+          onSuccess={async token => {
+            setToken(token)
+            setResult(0)
+            try {
+              const result = await axios.post('/api/get-verify-code', {
+                token
+              })
+              if (result.data.success) {
+                setCode(result.data.data)
+                setResult(2)
               } else {
-                setResult(3)
+                if (result.data.message) {
+                  setResultMsg(result.data.message)
+                } else {
+                  setResult(3)
+                }
               }
+            } catch {
+              setResult(3)
             }
-          } catch {
-            setResult(3)
-          }
-        }}
-        onError={() => setResult(1)}
-        hidden={result != -1}
-        className='flex justify-center'
-      />
+          }}
+          onError={() => setResult(1)}
+          className='flex justify-center'
+        />
+      )}
       <p className='mt-2 -mb-2 text-center text-sm' hidden={result == -1}>
         {result == 0
           ? 'Getting verification code...'
@@ -57,26 +58,29 @@ export default function CaptchaCodePage () {
           : resultMsg ??
             'Failed to get verification code. Please try again later.'}
       </p>
-      <p
-        className='bg-[rgb(64,64,88)] border border-[rgb(88,88,112)] hover:bg-[rgb(88,88,112)] hover:border-[rgb(112,112,136)] rounded-md px-2 py-1 mt-4 transition-colors text-center cursor-pointer'
-        hidden={result != 2}
-        onClick={async () => {
-          navigator.clipboard.writeText(code ?? '')
-          if (showCopied) return
-          setShowCopied(true)
-          setTimeout(() => {
-            setShowCopied(false)
-          }, 3000)
-        }}
-      >
-        {code ?? 'N/A'}
-      </p>
-      <p
-        className='text-blue-500 text-center mt-2 -mb-4'
-        hidden={!showCopied || result != 2}
-      >
-        Copied to clipboard!
-      </p>
+      {result == 2 && (
+        <>
+          <p
+            className='bg-[rgb(64,64,88)] border border-[rgb(88,88,112)] hover:bg-[rgb(88,88,112)] hover:border-[rgb(112,112,136)] rounded-md px-2 py-1 mt-4 transition-colors text-center cursor-pointer'
+            onClick={async () => {
+              navigator.clipboard.writeText(code ?? '')
+              if (showCopied) return
+              setShowCopied(true)
+              setTimeout(() => {
+                setShowCopied(false)
+              }, 3000)
+            }}
+          >
+            {code ?? 'N/A'}
+          </p>
+          <p
+            className='text-blue-500 text-center mt-2 -mb-4'
+            hidden={!showCopied}
+          >
+            Copied to clipboard!
+          </p>
+        </>
+      )}
     </div>
   )
 }