import React, {useRef, useEffect} from 'react';
import {SafeAreaView, StyleSheet, BackHandler} from 'react-native';
import {WebView} from 'react-native-webview';

const App = (): React.JSX.Element => {
  const webviewRef = useRef<WebView | null>(null);

  const clearCookiesScript = `
  (function() {
    document.cookie.split(";").forEach(function(c) { 
      document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); 
    });
    window.ReactNativeWebView.postMessage('Cookies cleared');
  })();
`;

  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      () => {
        if (webviewRef.current) {
          webviewRef.current.goBack();
          return true;
        }
        return false;
      },
    );

    return () => backHandler.remove();
  }, []);

  const onMessage = (event: {nativeEvent: {data: any}}) => {
    console.log('Message from WebView:', event.nativeEvent.data);
  };

  const injectedJavaScript = `
    (function() {
      document.cookie = 'myCookie=myValue; path=/';
      window.ReactNativeWebView.postMessage('Cookie set: ' + document.cookie);
      const originalFetch = fetch;
      fetch = function(...args) {
        return originalFetch.apply(this, args).then(response => {
          response.clone().text().then(text => {
            window.ReactNativeWebView.postMessage(JSON.stringify({
              type: 'fetch',
              url: args[0],
              options: args[1],
              response: text
            }));
          });
          return response;
        });
      };

      const originalXHR = window.XMLHttpRequest.prototype.open;
      window.XMLHttpRequest.prototype.open = function(method, url) {
        this.addEventListener('load', function() {
          window.ReactNativeWebView.postMessage(JSON.stringify({
            type: 'xhr',
            method,
            url,
            status: this.status,
            response: this.responseText
          }));
        });
        return originalXHR.apply(this, arguments);
      };

      console.log('JavaScript injected successfully');
      window.ReactNativeWebView.postMessage('JavaScript injected successfully');
    })();
  `;

  useEffect(() => {
    if (webviewRef.current) {
      webviewRef.current.injectJavaScript(clearCookiesScript);
      webviewRef.current.clearCache?.(true);
    }
  }, [clearCookiesScript]);

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        ref={webviewRef}
        source={{uri: 'http://172.16.4.229:1000/'}}
        originWhitelist={['*']}
        mixedContentMode="always"
        javaScriptEnabled={true}
        domStorageEnabled={true}
        injectedJavaScript={injectedJavaScript}
        onMessage={onMessage}
        onNavigationStateChange={navState => {
          if (!navState.canGoBack) {
            return true;
          }
          webviewRef.current?.injectJavaScript(`
            window.ReactNativeWebView.postMessage('Navigated to: ' + document.cookie);
          `);
        }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

This is my App.tsx file. The problem I am facing is that the URL is not making any request at the backend. Such that when I try to login in this URL it stuck at the Login screen this mean it is not making any request at the backend. Can any body guide me how to overcome this issue.
I just make this project without expo by following the command of the react native official website