How to use Navigator.restorablePushNamed(context, 'our-route-name') with Generated routing in Flutter?

Question

I am trying to implement the restorable routing in Flutter. Here is my sample code, that I am trying.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case 'counter':
            return MaterialPageRoute(builder: (context) => const CounterPage());
          default:
            return MaterialPageRoute(builder: (context) =>const HomePage());
        }
      },
      title: 'Flutter Demo',
      restorationScopeId: "root",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("Open counter screen"),
          onPressed: () {
            Navigator.restorablePushNamed(context, 'counter');
          },
        ),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Counter"),
      ),
      body: const Center(
        child: Text(
          'Counter Screen',
        ),
      ),
    );
  }
}

Note: Turn on the Don't keep activities in developer option of mobile before running the app

Actual Output:

1. App starts for the first time. The user goes to the CounterPage
2. Then the user switched to any other app ,(i.e. Instagram,Facebook, etc)
3. Now, when user starts our app again then following error occurs

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building _FocusMarker:
Could not find a generator for route RouteSettings("counter", null) in the _WidgetsAppState.

Make sure your root app widget has provided a way to generate
this route.
Generators for routes are searched for in the following order:
 1. For the "/" route, the "home" property, if non-null, is used.
 2. Otherwise, the "routes" table is used, if it has an entry for the route.
 3. Otherwise, onGenerateRoute is called. It should return a non-null value for any valid route not handled by "home" and "routes".
 4. Finally if all else fails onUnknownRoute is called.
Unfortunately, onUnknownRoute was not set.
The relevant error-causing widget was
MaterialApp
main.dart:28
When the exception was thrown, this was the stack

════════ Exception caught by widgets library ═══════════════════════════════════
A GlobalKey was used multiple times inside one widget's child list.
The relevant error-causing widget was
MaterialApp
main.dart:28
════════════════════════════════════════════════════════════════════════════════
E/BLASTBufferQueue( 8931): [SurfaceView[com.example.resume_app_routing/com.example.resume_app_routing.MainActivity]#9](f:0,a:2) isEGL=1, mPendingRelease.size()=1, mMaxAcquiredBuffers=4, currentMaxAcquiredBufferCount=2

Expected Output:

1. App starts for the first time. The user goes to the CounterPage
2. Then the user switched to any other app ,(i.e. Instagram,Facebook, etc)
3. Now, when user starts our app again then CounterPage should open