Improve the way this is hidden

src/app/verify-code/page.tsx

@@ -20,6 +20,7 @@ export default function CaptchaCodePage () {
       <p className='mb-4 px-8 -mt-2 text-center'>
         Verify you are human to get a code
       </p>
+      {result == -1 && (
         <Turnstile
           siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
           onSuccess={async token => {
@@ -44,9 +45,9 @@ export default function CaptchaCodePage () {
             }
           }}
           onError={() => setResult(1)}
-        hidden={result != -1}
           className='flex justify-center'
         />
+      )}
       <p className='mt-2 -mb-2 text-center text-sm' hidden={result == -1}>
         {result == 0
           ? 'Getting verification code...'
@@ -57,9 +58,10 @@ export default function CaptchaCodePage () {
           : resultMsg ??
             'Failed to get verification code. Please try again later.'}
       </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'
-        hidden={result != 2}
             onClick={async () => {
               navigator.clipboard.writeText(code ?? '')
               if (showCopied) return
@@ -73,10 +75,12 @@ export default function CaptchaCodePage () {
           </p>
           <p
             className='text-blue-500 text-center mt-2 -mb-4'
-        hidden={!showCopied || result != 2}
+            hidden={!showCopied}
           >
             Copied to clipboard!
           </p>
+        </>
+      )}
     </div>
   )
 }