Get Auto_Route nested AutoRouter()'s route stack in parent page and rebuild when it changes, using Hooks/Riverpod

Question

I'm trying to make a UI shell for my app using nested Auto_Route routes, and one thing I want the shell to have is a breadcrumb navigation bar to show the stack of routes and let you click on any to pop back to it.

So I have a simple AppShellPage. This is what I have attempted so far, creating a key in useMemoized, getting the controller via the key in useListenable.

@RoutePage()
class AppShellPage extends HookWidget {
  const AppShellPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final routerKey = useMemoized(() => GlobalKey<AutoRouterState>(), []);
    final routerController = useListenable(routerKey.currentState?.controller!);

    print('routerController: $routerController');
    print('routerKey: $routerKey');

    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Column(
        children: [
          SizedBox(
            height: 40,
            child: Row(
              children: routerController == null
                  ? []
                  : routerController.stack.map((route) {
                      return Text('> ${route.name ?? ''}');
                    }).toList(),
            ),
          ),
          Expanded(child: AutoRouter(key: routerKey)),
        ],
      ),
    );
  }
}

Now this actually works and does exactly what I want it to do, but only after hot reloading once. I think this is pretty obviously due to the nested AutoRouter having not been instantiated until after the AppShellPage is, thus the routerController is null until it's reloaded once.

I don't know if the solution is something along these lines but updating routerController when it's not null anymore, or if I should be doing this some whole different way such as using a Riverpod Provider and Stream.

I don't want to use any StatefulWidgets, I'm using Hooks and Riverpod Generator.