How to fix 'AutoRouter operation requested with a context that does not include an AutoRouter.' in Flutter?

I am using auto_route v2.2.0 package to handle routing in my flutter application. When i click on the button to go to Page A/B, i get

AutoRouter operation requested with a context that does not include an AutoRouter.

Since i have used a builder within the MaterialApp.router shouldn't the context include the AutoRouter. I have added the code below.

router.dart

@MaterialAutoRouter(  
  replaceInRouteName: 'Page,Route',  
  routes: <AutoRoute>[  
    AutoRoute(page: MyApp, initial: true),  
    AutoRoute(page: PageA),  
    AutoRoute(page: PageB),  

  ],  
)  
class $AppRouter {} 

router.gr.dart

import 'package:auto_route/auto_route.dart' as _i1;
import 'package:flutter/material.dart' as _i2;

import 'main.dart' as _i3;
import 'page_a.dart' as _i4;
import 'page_b.dart' as _i5;

class AppRouter extends _i1.RootStackRouter {
  AppRouter([_i2.GlobalKey<_i2.NavigatorState>? navigatorKey])
      : super(navigatorKey);

  @override
  final Map<String, _i1.PageFactory> pagesMap = {
    MyApp.name: (routeData) => _i1.MaterialPageX<dynamic>(
        routeData: routeData,
        builder: (_) {
          return _i3.MyApp();
        }),
    RouteA.name: (routeData) => _i1.MaterialPageX<dynamic>(
        routeData: routeData,
        builder: (_) {
          return _i4.PageA();
        }),
    RouteB.name: (routeData) => _i1.MaterialPageX<dynamic>(
        routeData: routeData,
        builder: (_) {
          return _i5.PageB();
        })
  };

  @override
  List<_i1.RouteConfig> get routes => [
        _i1.RouteConfig(MyApp.name, path: '/'),
        _i1.RouteConfig(RouteA.name, path: '/page-a'),
        _i1.RouteConfig(RouteB.name, path: '/page-b')
      ];
}

class MyApp extends _i1.PageRouteInfo {
  const MyApp() : super(name, path: '/');

  static const String name = 'MyApp';
}

class RouteA extends _i1.PageRouteInfo {
  const RouteA() : super(name, path: '/page-a');

  static const String name = 'RouteA';
}

class RouteB extends _i1.PageRouteInfo {
  const RouteB() : super(name, path: '/page-b');

  static const String name = 'RouteB';
}

MyApp.dart

class MyApp extends StatelessWidget {
  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
      builder: (context, widget) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Material App Bar'),
          ),
          body: Center(
              child: Column(
            children: [
              ElevatedButton(
                  onPressed: () => context.pushRoute(
                      RouteA()),
                  child: Text('Page A')),
              ElevatedButton(
                  onPressed: () => context.pushRoute(
                      RouteA()),
                  child: Text('Page B'))
            ],
          )),
        );
      },
    );
  }
}

This example was done by following the documentation provided here. How do i fix this issue

Remove the code inside of the material App's builder to your home page or something. You're getting the error because you're passing a custom builder that ignores the router widget that's passes to the builder.