Flutter Admob Interstitial Ad overwrites system bottom navigation bar color to white

I have admob in my flutter app. My system bottom navigation color is set to a custom color by the following flutter code:

PlatformApp(
      material: (_, __) => MaterialAppData(
        themeMode: ThemeMode.dark,
        theme: ThemeData(
          splashFactory: InkRipple.splashFactory,
          applyElevationOverlayColor: true,
          accentColor: Color(0xffe22249),
          colorScheme: ColorScheme.dark(
            primary: Color(0xffe22249),
            brightness: Brightness.dark,
            background: Color(0xff090909),
            surface: Color(0xff090909),
            onSurface: Color(0xffffffff),
            onBackground: Color(0xffffffff),
          ),
        ),
      ),
    );

In my page I use:

AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarBrightness: Brightness.dark,
        statusBarColor: Theme.of(context).colorScheme.surface,
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarColor: Theme.of(context).colorScheme.surface,
        systemNavigationBarIconBrightness: Brightness.light,
        systemNavigationBarDividerColor: Theme.of(context).colorScheme.surface,
      ),

Here is how I show interstitial ad:

InterstitialAd interstitial = InterstitialAd(

        adUnitId: InterstitialAd.testAdUnitId,
        targetingInfo: MobileAdTargetingInfo(
          testDevices: ["MY_SECRET_PHONE_ID"],
          
        ),
        listener: (MobileAdEvent event) async {
          if (event == MobileAdEvent.loaded) {
              interstitial
                  .show(
                anchorType: AnchorType.bottom,
                anchorOffset: 0.0,
                horizontalCenterOffset: 0.0,
              )
                  .catchError((e) {
                //TODO: Log error to analytics
                print(e);
              });
     
          } 
        });

    interstitial.load(); 

The ad shows fine. I get the test ad.

My problem is for some reason, whenever an ad is shown it overwrites my system bottom navigation color to white which makes it seem odd and ruins the continuity of my apps style. Here is what happens:

As you can see the system bottom navigation is overwritten to white. This looks odd. I want to keep my apps custom color that I set with the flutter code while showing interstitial. Is this possible? Why is the system bottom navigation bar color overwritten?

Here is my manifest file:

<application
        android:name="io.flutter.app.FlutterApplication"
        android:icon="@mipmap/ic_launcher">
     
        <activity
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            >
... REST OF MANIFEST IS IRRELEVANT...

You can override the color property of the navbar using SystemUiOverlayStyle like this.

const mySystemTheme= SystemUiOverlayStyle.light
.copyWith(systemNavigationBarColor: Colors.red);

Use AnnotatedRegion widget on your screen where you show adds like this.

Widget build(BuildContext context) {
return new AnnotatedRegion<SystemUiOverlayStyle>(
value: mySystemTheme,
child: new MyRoute(),
 );
}