How to blend the Flutter bottom navigation bar with the system navigation space at the bottom

Question

I'm building a flutter app and I used the BottomNavigationBar widget everything seems to work fine but the color of the Navigation bar is not blending with the device navigation space. (The place where the home button recides).

Below is something what I'm looking for

I want the colors of both 1 & 2 to be the same. Simply I want the color of 2same as the bottom navigation bar.

I also used Material 3 for this app.

This is my current implementation.

class BottomNavbar extends StatelessWidget {
  const BottomNavbar({super.key});

  void _onTap(int index, BuildContext context) {...}

  int _calculateSelectedIndex(BuildContext context) {...}

  @override
  Widget build(BuildContext context) {
    return NavigationBar(
      selectedIndex: _calculateSelectedIndex(context),
      onDestinationSelected: (int index) => _onTap(index, context),
      destinations: const [
        NavigationDestination(
          label: "Home",
          icon: Icon(
            Icons.home_filled,
          ),
          tooltip: "Home",
        ),
        NavigationDestination(
          label: "Collections",
          icon: Icon(
            Icons.bookmarks_outlined,
          ),
          tooltip: "Collections",
        ),
      ],
    );
  }
}

class MainScaffold extends StatelessWidget {
  final Widget child;
  const MainScaffold({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const MemitDrawer(),
      appBar: const MemitAppBar(),
      body: child,
      floatingActionButton: FloatingActionButton(...),
      bottomNavigationBar: const BottomNavbar(),
    );
  }
}