Payment page is not working in React Native Webview app

Question

I'm trying to create an ReactNative WebView app for my online store. Everything works fine until I try to pay for the order.

The error I'm getting is Payment Page of WebView app I can close that popup, still it would not open any links from there except installed UPI apps like GPay.

My App.tsx file is

import { View, Platform, SafeAreaView, BackHandler, Dimensions, Image, Linking } from 'react-native';
import * as React from "react";
import { useEffect, useState, useRef } from 'react';
import {WebView} from "react-native-webview";
import Constants from "expo-constants";
import NetInfo from "@react-native-community/netinfo"

const BACKGROUND_COLOR = "#53B948";
const DEVICE_WIDTH = Dimensions.get("window").width;
const DEVICE_HEIGHT = Dimensions.get("window").height;
const ANDROID_BAR_HEIGHT = Platform.OS === "android" ? Constants.statusBarHeight : 0;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

export default function App() {
  const WEBVIEW = useRef()
  const [backButtonEnabled, setBackButtonEnabled] = useState(false);
  const [isConnected, setConnected] =useState(true);
  const [loading, setLoading] = useState(true);

  function webViewLoaded(){
    setLoading(false);
  }

  useEffect(() => {
    const netInfoSubscribe =NetInfo.addEventListener(state => {
      setConnected(state.isConnected);
      if(!state.isConnected){
        alert('No Internet Connection');
      }
    });
    return netInfoSubscribe;
  }, []);

  function onNavigationStateChange(navState){
    setBackButtonEnabled(navState.canGoBack)
  }

  useEffect(()=> {
    function backHandler(){
      if(backButtonEnabled){
        WEBVIEW.current.goBack();
        return true;
      }
    }

    BackHandler.addEventListener("hardwareBackPress", backHandler);

    return () => BackHandler.removeEventListener("hardwareBackPress", backHandler);

  }, [backButtonEnabled]);

  return (
    <SafeAreaView style={{
      flex: 1,
      backgroundColor: BACKGROUND_COLOR
    }}>
      <View style={{
        height: ANDROID_BAR_HEIGHT,
        backgroundColor: BACKGROUND_COLOR,
        flex: 1
      }}>
      {(loading || !isConnected  ) &&(
        <View style={{
          backgroundColor: BACKGROUND_COLOR,
          position: "absolute",
          top: 0, left: 0,
          zIndex: 10,
          width: DEVICE_WIDTH,
          height: DEVICE_HEIGHT + ANDROID_BAR_HEIGHT,
          flex: 1,
          alignItems: "center",
          justifyContent: "center"
        }}>
          <Image source={require("./assets/icon.png")} style={{width: "25%"}}></Image>
        </View>
      )}
      {isConnected && (
        <View style={{
          height: Platform.OS === "android" ? Constants.statusBarHeight :  0,
          flex: 1
        }}>
          <WebView 
            onLoad={webViewLoaded}
            ref={WEBVIEW}
            onNavigationStateChange={onNavigationStateChange}
            source={{
              uri: "[My Website Here]"
            }}
            useWebKit = {true}
            style={{flex: 1, width: deviceWidth, height: deviceHeight}}
            javaScriptEnabled = {true}
            domStorageEnabled = {true}
            startInLoadingState = {true}
            scalesPageToFit = {true}
            automaticallyAdjustContentInsets = {false}
            originWhitelist={["*"]}
            thirdPartyCookiesEnabled = {true}
            sharedCookiesEnabled = {true}
            setSupportMultipleWindows = {true}
            allowsBackForwardNavigationGestures = {true}
            onError = {err => { alert(err) }}
            
          />
        </View>
      )}
      </View>
    </SafeAreaView>
  );
}

Payment Gateway that I'm trying to implement is CashFree

I am trying to create am WebView app in React Native for my online store (Magento 2.4.6).