Flutter Navigation 2.0 with bloc and cubit pop and back button not working

Question

I am implementing flutter navigation 2.0 for mobile with BLoC and cubit. Navigating from one screen to the other declaratively is working fine. The issue is when I pop using the back arrow or tap Android back button. The back arrow loops back to the current screen and the Android back button exits the App instead of going back to the previous screen.

Here is MyRouterDelegate:

class MyRouterDelegate extends RouterDelegate
        with ChangeNotifier, PopNavigatorRouterDelegateMixin {
      final GlobalKey<NavigatorState> navigatorKey;
    
      CustomerNavigator() : navigatorKey = GlobalKey<NavigatorState>();
    
      @override
      Future<bool> popRoute() async {
        print('back button dispatched');
        MoveToBackground.moveTaskToBack();
        return true;
      }
    
      // I don't use named navigation so I don't use this
      @override
      Future<void> setNewRoutePath(configuration) async => null;
    
      @override
      Widget build(BuildContext context) {
        return BlocBuilder<MyRouterCubit, MyRouterState>(builder: (context, state) {
          return Navigator(
            key: navigatorKey,
            pages: [
              //show show HomePage
              if (state is HomePageState)
                MaterialPage(
                    key: const ValueKey('HomePageView'),
                    child: HomePageView()),
              if (state is UserProfileState)
                MaterialPage(
                    key: const ValueKey('UserProfileView'),
                    child: UserProfileView()),
              if (state is UpdateProfileState)
                MaterialPage(
                    key: const ValueKey('UpdateProfileState'),
                    child: UpdateProfileState(
                      profile: state.profile,
                    )),
                    .....
    
             
            ],
            onPopPage: (route, result) {
              print(result);
              if (!route.didPop(result)) {
                return false;
              }
    
              notifyListeners();
              return true;
            },
          );
        });
      }
    }

And this is how I am using it in the main.dart:

MaterialApp(
    title: appTitle,
    debugShowCheckedModeBanner: false,
    theme: lightThemeData(context),
    darkTheme: darkThemeData(context),
    home: Router(
        routerDelegate: MyRouterDelegate(),
        backButtonDispatcher: RootBackButtonDispatcher(),
    ) 
);

When the App loads; it displays the HomePage as expected. When I navigate to userprofile, UserProfileState is emitted and UserProfileScreen is displayed as expected.

UserProfileScreen access the API via bloc and will display data from API as expected.

When I click the back arrow button on UserProfile screen I expect to go back to HomePage. What happens instead is the UserProfile is reloaded and API request is resend.

When I tap the Android back button closes the App instead of going back the previous screen in tis case the HomePage. I am having the same issue with other screen in the App. This is how I am handling my navigation events via navigation cubit

onTap:(){
BlocProvider.of<MyRouterCubitCubit>(context).showUserProfile();
}

However when I navigate imperatively like this:

Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => UserProfileView()));

The back arrow works. This tells me the first navigation approach is not pushing pages into navigation stack.

Note: I am using a custom app with back arrow like so:

IconButton(
                icon: Icon(
                  Icons.arrow_back,
                  color: Theme.of(context).primaryColor,
                  size: 40,
                ),
                iconSize: 30,
                onPressed: () {
                  
                  Navigator.of(context).pop();
                  
                })

What am I doing wrong, kindly assist.