I get AbortError: OTP retrieval was cancelled before receiving SMS

Question

import loginServices from "@/services/login/ServicesLogin";
import React, { useState } from "react";
import toast from "react-hot-toast";

const TestPage = () => {
  const [otpValue, setOtpValue] = useState("");

  const handleSendOTP = () => {
    loginServices
      .SendVerifyCodeLogin("09361651719")
      .then((res) => {
        if (res) {
          if (navigator && navigator.credentials) {
            const ac = new AbortController();
            navigator.credentials
              .get({
                otp: { transport: ["sms"] },
                signal: ac.signal,
              })
              .then((otp) => {
                setOtpValue(otp.code);
              })
              .catch((err) => {
                console.log(ac.signal);
                console.log(err);
              });
          }
          toast.success(res.result);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  return (
    <div className="mt-20 mr-5">
      <input
        type="text"
        className="bg-slate-300"
        autoComplete="one-time-code"
        value={otpValue}
        onChange={(e) => setOtpValue(e.target.value)}
      />
      <button onClick={handleSendOTP}>send</button>
    </div>
  );
};

export default TestPage;

This is a test page for otp autofill. I have checked the sms and the compatibililty of the browser everything seems to be fine but I get this error as soon as it gets to the promise for navigator.creditentials.The error occurs before even getting the sms. what could be the issue?