Firebase Authentication Error: FirebaseError - auth/network-request-failed in Expo App

Question

I'm encountering an issue with Firebase Authentication while developing my Expo app. Specifically, I'm receiving the following error message: FirebaseError: Firebase: Error (auth/network-request-failed). Here's a breakdown of my code and the steps I've taken:

I'm using Firebase version 10.8.0 in my Expo app. My authentication flow involves phone number verification using Firebase Authentication.

Here's a snippet of my code:

import { useFirebaseLogin } from "@itzsunny/firebase-login";
import { Redirect } from "expo-router";
import React, { useState} from "react";
import { View, Button } from "react-native";
import {Paragraph, Title, Button as PaperButton, TextInput, Card} from "react-native-paper";
import { useSession } from "../../context/auth";
import { app, auth, db } from "../../firebaseConfig";

export default function SignIn() {
  const { user } = useSession();
  const [verificationCode, setVerificationCode] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const [verificationId, setVerificationID] = useState("");

  const { recaptcha, sendOtp, verifyOtp } = useFirebaseLogin({
    auth,
    firebaseConfig: app.options,
    modalOption: { attemptInvisibleVerification: true },
  });

  // Phone authentication handlers
  const handleSendVerificationCode = async () => {
    try {
      const verificationId = await sendOtp(phoneNumber);
      setVerificationID(verificationId); // set the verification id
    } catch (error) {
      console.log("sending verification failed", error);
    }
  };

  const handleVerifyVerificationCode = async () => {
    try {
      await verifyOtp(verificationId, verificationCode);
    } catch (error) {
      console.log("otp verification failed", error);
    }
  };

  // JSX for rendering UI
  return (
    <>
      {!verificationId && (
        <View style={styles.container}>
          <Card style={styles.card}>
            <Title style={styles.title}>Sign in with Mobile</Title>

            <Paragraph style={styles.subtitle}>
              Enter your mobile number to Login
            </Paragraph>

            <TextInput
              keyboardType="phone-pad"
              value={phoneNumber}
              onChangeText={setPhoneNumber}
            />
            <PaperButton
              style={styles.button}
              onPress={handleSendVerificationCode}
            >
              Send OTP
            </PaperButton>
          </Card>
        </View>
      )}

      {verificationId && (
        <View style={styles.container}>
          <Card style={styles.card}>
            <Title style={styles.title}>Enter OTP</Title>
            <Paragraph style={styles.subtitle}>Enter Received OTP</Paragraph>
            <TextInput
              keyboardType="phone-pad"
              onChangeText={setVerificationCode}
              value={verificationCode}
            />
            <PaperButton
              style={styles.button}
              onPress={handleVerifyVerificationCode}
            >
              Verify
            </PaperButton>
          </Card>
        </View>
      )}
      {recaptcha}
    </>
  );
}

I've tried troubleshooting the issue but haven't been successful. Could someone please guide me on how to resolve this Firebase Authentication error in my Expo app? Any insights or suggestions would be greatly appreciated. Thank you!