How to handle hardware back button behavior ( BackHandler ) with out defining it on other page with the help of useFocusEffect in React Native?

Handle hardware back button behavior ( BackHandler ) with out defining it on other page with the help of useFocusEffect hook of react-navigation/native in React Native :---

import { useFocusEffect } from '@react-navigation/native';// first import this 

// **** This below part is not necessary (start)***
React.useLayoutEffect(() => { //this is used to create back btn in appbar ( https://reactnavigation.org/docs/header-buttons/ )
        props.navigation.setOptions({
            headerLeft: () => (
                <HeaderBackButton tintColor={COLORS.white} onPress={() => {
                    handleLandingPgBackClick()
                }} />
            ),
        });
    }, [props.navigation]);

// **** This above part is not necessary (end)***

useFocusEffect(   // this part is important
        React.useCallback(() => {
            BackHandler.addEventListener("hardwareBackPress", handleLandingPgBackClick);
            return () => {
                BackHandler.removeEventListener("hardwareBackPress", handleLandingPgBackClick);
            };
        }, [])
    );

    const handleLandingPgBackClick = () => {  // this is the func. to goBack
        props.navigation.navigate('TopLandingPage')

       //props.navigation.goBack()
        return true;
    }

return ( <> </>)