I have a hook to read OTP from sms in nextJS

import { useRouter } from 'next/router'
import { useEffect } from 'react'

const useAutoReadOtp = (handleSetOtp = (_: string) => {}, enabled = true) => {
  const { isReady } = useRouter()

  const ac = new AbortController()

  useEffect(() => {
    if (isReady && 'OTPCredential' in window && enabled) {

      // Fetch OTP from SMS
      navigator.credentials
        .get({
          otp: { transport: ['sms'] },
          signal: ac.signal,
        } as CredentialRequestOptions)
        .then((otp: any) => {
          if (otp && otp.code) {
            handleSetOtp(otp.code)
          }
        })
        .catch((err) => {
          console.log('Error reading OTP:', err)
        })
    } else {
      alert('Not supported Web OTP')
    }
    // Cleanup the AbortController on unmount or retry
    return () => {
      ac.abort()
    }
  }, [isReady, enabled, handleSetOtp])
}

export default useAutoReadOtp

If we allow the browser to read OTP from the popup then it works perfectly. But after denying on first try in next tries it opens the popup but does not work on clicking Allow.

I have tried to see if navigator.credentials.get is getting resolved or throwing error or anything by adding finally to the promise but it is not executed. Also nothing inside error, .catch or else is getting executed when I click on allow after clicking on Deny.