SwiftUI MapKit is creating a gradient behind the top navigation link

I'm trying to add a map to a swiftUI view. The map is loading fine, but it's discoloring the background of the navigation link.

A simplified example of what I'm talking about...

import SwiftUI
import MapKit

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Parent View Content")
                NavigationLink("Go to Child View", destination: ChildView())
                NavigationLink("Go to Child View 2", destination: ChildView2())
            }
            .navigationBarTitle("Parent View", displayMode: .inline)
            .onAppear {
                let appearance = UINavigationBarAppearance()
                appearance.configureWithTransparentBackground()
                UINavigationBar.appearance().standardAppearance = appearance
                UINavigationBar.appearance().scrollEdgeAppearance = appearance
            }
        }
    }
}

struct ChildView: View {

    var body: some View {
        ZStack {
            // Map view as the background
            Map() {

            }
            .edgesIgnoringSafeArea(.all)
            .background(Color.clear)

            VStack {
                Text("Child View Content")
                Spacer()
            }
        }
        .navigationBarTitle("Child View", displayMode: .inline)
        .onAppear {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithTransparentBackground()
            appearance.backgroundColor = .clear // Set background color to clear
            appearance.shadowColor = .clear // Remove shadow
            UINavigationBar.appearance().standardAppearance = appearance
            UINavigationBar.appearance().scrollEdgeAppearance = appearance
        }
    }
}

struct ChildView2: View {
    var body: some View {
        ZStack {
            // Map view as the background
            Map(coordinateRegion: .constant(MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194), span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1))))
                .edgesIgnoringSafeArea(.all)
                .background(Color.clear)
            VStack {
                // Your child view content
                Text("Child View 2 Content")
                Spacer()
            }
        }
    }
}

Both navigation items lead to maps being displayed.

On ChildView, you'll notice a grey gradient behind the navigation.

On ChildView2, you'll see there is no gradient, it's transparent.

I want the effect of ChildView2, without that background, but the problem is that method was depreciated in iOS 17.0 and is generating warnings. I'm not sure why it's been so difficult removing it with the new Map(position: $cameraPosition) approach.

Does anyone have an idea of how to get rid of that gradient background taking over the navigation header?

Many thanks!

The navigationbar defaults to a slightly transparent appearance. You can make it completely transparent with the modifier below.

    struct ChildView: View {

    var body: some View {
        ZStack {
            // Map view as the background
            Map()
            .edgesIgnoringSafeArea(.all)
            .background(Color.clear)

            VStack {
                Text("Child View Content")
                Spacer()
            }
        }
        .navigationBarTitle("Child View", displayMode: .inline)
        .toolbarBackground(.hidden, for: .navigationBar) // <-- HERE
    }