How To trigger custom topBar BackButton in React-Native-Navigation

first of all, there are plenty of this question in github but none of them have answered at all. that is why i am asking this here.

I have an app where i have multiple pages and components. at some point, i need to trigger custom event when user pressed BackButton, i am going to show an alert to the user and then it will go back or stay on current page.

Here are what i tried so far; this is how i register a page to the navigator:

                component:
                {
                    name: 'OTP',
                    passProps: {
                        authentication,
                        rememberMe,
                    },
                    options: {
                        topBar: {
                            ...Router.topBarTypes[TopBarType.RedWithLogo],
                            rightButtons: [Router.tempIcon],
                            leftButtons: [{ <--- HERE i asign leftButton
                                    id: 'OtpBackButton',
                                }],
                        },
                        statusBar: {
                            style: 'light',
                        },
                    },
                },


                component:
                {
                    name: 'PIN',
                    passProps: {
                        authentication,
                    },
                    options: {
                        topBar: {
                            ...Router.topBarTypes[TopBarType.RedWithLogo],
                            rightButtons: [Router.tempIcon],
                            backButton: { <--- I have tried with backButton option, and leftButtons option but none of them worked.
                                id: 'PinBackButton',
                                showTitle: false,
                            },
                        },
                        statusBar: {
                            style: 'light',
                        },
                    },
                },

after i register my components to the navigator, here is how i trigger custom topBar button pressed events: Basically, i have a BaseScreen and all other screens inherits what BaseScreen have.

    constructor(props: BaseScreenProps) {
        super(props);
        this.navigationEventListener = Navigation.events().bindComponent(this); 
        Navigation.events().registerNavigationButtonPressedListener(this.navigationButtonPressed);
    }

    navigationButtonPressed({ buttonId }: { buttonId: string}) {
        switch (buttonId) {
            case 'HomeButton':
                Navigation.popToRoot(Router.ActiveComponentId);
                break;
            case 'ProfileButton':
                Router.Profile();
                break;
            case 'NotificationSettingsIcon':
                Router.NotificationSettings();
                break;  
            case 'PinBackButton':
                console.log('PIN SCREEN BACK BUTTON PRESSED');
                break;  
            case 'OtpBackButton':
                console.log('OTP SCREEN BACK BUTTON PRESSED');
                break;  
            default:
                break;
        }
    }

all of my custom triggered functions work here except the two at the bottom where i want to trigger topBars backbutton event. this is not calling at all.

I have tried componentWillUnmount but it is not what i am looking for actually.

any help will be appreciated, thanks.