I have a simple react-native app with a couple of react-native screens and one of them has a webview, this webview is a page that opens other pages on button click like this ( from main webview on click opens another page (2), from Page 2 opens Page 3:

The issue is android's hardware back button, if I'm on the Page 3 and I press that button, I will be redirected to the previous react-native screen, not Page 2. I tried to fix this by implementing the following code:

import React, {useState, useEffect, useRef, useCallback} from 'react';
import {WebView} from 'react-native-webview';
import {BackHandler, Text} from 'react-native';

const MainWebviewPage= ({navigation}) => {
  const webViewRef = useRef();

  const [canGoBack, setCanGoBack] = useState(false);

  const handleBack = useCallback(() => {
    if (canGoBack && webViewRef.current) {
      webViewRef.current.goBack();
      return true;
    }
    return false;
  }, [canGoBack]);

  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handleBack);
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handleBack);
    };
  }, [handleBack]);
  useEffect(() => {
    webViewRef.current.reload();
  }, []);

  return (
      <WebView
        scalesPageToFit={false}
        ref={(ref) => (webViewRef.current = ref)}
        source={{uri:url}
        onLoadProgress={(event) =>  setCanGoBack(event.nativeEvent.canGoBack)}
        
      />
  );
};

export default MainWebviewPage;

This code works partially ( if I'm on the Page 3 and I click android's back button, I'll be redirected to the Page 2) but when I'm on the Main webview page and I click android's back button the screen will reload and either I'm still on this page or it's a blank page, in order to get to the previous react-native screen I need to click back button twice. If I remove the above code and I'm on the Page 3 and I click back button - I'll be redirected to the react-native screen ( not Page 2). I can't figure out why the back button behavior is so different.