check if current is the main page react-native-webview - react-native

Question

I have a WebView project of an PHP admin panel, that I put a custom Back Button on top of its WebView. I want this button to be visible only if the current screen can go back, which is any screen beside main screen, and in this case our main screen is a admin panel login page. So I came up with the code I shared below.
It works fine, unless you login with wrong credentials. The Back Button immediately shows up when the login button pressed inside the WebView because it gets to another url from admin.panel/login to admin.panel/login/login, but it shouldn't render unless we successfully login to the panel. How can I achieve that?
BackButton.js
import { StyleSheet, TouchableOpacity } from "react-native";
import { Ionicons } from "#expo/vector-icons";
const BackButton = (props) => {
return (
<TouchableOpacity style={styles.button} onPress={props.onPress}>
<Ionicons name="arrow-back" size={24} color="black" />
</TouchableOpacity>
);
};
App.js
import React, { useEffect, useRef } from "react";
import { StyleSheet, Platform, BackHandler, View } from "react-native";
import { WebView } from "react-native-webview";
import MyStatusBar from "./components/MyStatusBar";
import MyBackButton from "./components/BackButton";
export default function App() {
const webViewRef = useRef();
// to handle goBack function for both button and hardwareBackPress
const onBackPress = () => {
if (webViewRef.current) {
webViewRef.current.goBack();
return true;
}
return false;
};
// to check if current can go back
const [canGoBack, setCanGoBack] = React.useState(false);
// WebView does not support swipe back for some android devices
// thus we have to handle the goBack function with hardwareBackPress
useEffect(() => {
...
}
}, []);
return (
<View style={styles.container}>
<MyStatusBar />
<WebView
allowsBackForwardNavigationGestures
allowsInlineMediaPlayback
ref={webViewRef}
source={{ uri: "https://admin.panel/login" }}
style={styles.webView}
onNavigationStateChange={(navState) => setCanGoBack(navState.canGoBack)}
/>
{canGoBack? (
<View style={styles.button}>
<MyBackButton onPress={onBackPress} />
</View>
) : null}
</View>
);
}