Hi everyone, i have a nextjs 13 project (pages dir) & i'm trying to implement otp auto fill for android devices (chrome browsers only as i know it works on chrome only), so for that i'm using web otp api - https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API. The issue is that the code works fine on codesandbox domain (https://9wrlc.csb.app/), but the same code (same code for web otp but has lot more things in the form on my actual website) doesn't trigger the web otp api on my specific domain. I made sure that my website is running on secure context (https). Below is the code which i integrated in my website:-

useEffect(() => {
    if ("OTPCredential" in window) {
      console.log("inside otp creds api");
      const input = document.querySelector(
        'input[autocomplete="one-time-code"]'
      );
      if (!input) return;
      console.log("otp auto fill input: ", input);
      const ac = new AbortController();

      navigator.credentials
        .get({
          otp: { transport: ["sms"] },
          signal: ac.signal,
        })
        .then((otp) => {
          if (otp?.code) {
            const otpValue = otp?.code?.replace(/\D/g, "");
            setOtp(otpValue);
            validateOtp(otpValue); // submit otp using API
            ac.abort();
          }
        })
        .catch((err) => {
          console.log("Web OTP API Error:", err);
          ac.abort();
        });
    }
  }, []);

return (
  ...
  <input
    ref={otpInputRef}
    inputMode="numeric"
    autoComplete="one-time-code"
    type="text"
    placeholder="Enter OTP"
    pattern="/^\d+$/"
    name="otp"
    value={otp}
    onChange={otpInputChangeHandler}
   />
...
)

below is the message format :-

8765 is your one time password (OTP) to proceed on xyz website. It is valid only for 15 minutes. Do not share your OTP with anyone.
@app-dev.company.com #8765

What could be done in this case? Help required!