NavigationBarTitle automatic display mode doesn't work

I am unsure how to fix this. I have implemented a ScrollView and a NavigationView with ZStacks. However, the automatic display mode doesn't work and the ScrollView sits behind it, with the Title overlapping.

https://i.sstatic.net/KPkGh.png https://i.sstatic.net/H8NwS.png

Here is my current code:

struct Overview: View {
    var body: some View {
        
        ZStack{
            
            NavigationView {
                    
                        ZStack {
                        Color.init("Background")
                            .navigationBarHidden(false)
                            .navigationBarTitle("Overview", displayMode: .automatic)
                            .edgesIgnoringSafeArea(.top)
                            
                            ScrollView(showsIndicators: false) {
                                VStack(spacing: 10) {
                                    ForEach(0..<10) {
                                        Text("Item \($0)")
                                            .foregroundColor(.white)
                                            .font(.largeTitle)
                                            .frame(width: 340, height: 200)
                                            .background(ColorManager.BoxColor)
                                            .cornerRadius(10)
                                    }
                                }
                                .frame(maxWidth: .infinity)
                            }
                    }
        }
        }
    }
}

    var body: some View {
    
    NavigationView {
        
        ScrollView(showsIndicators: false) {
            VStack(spacing: 10) {
                ForEach(0..<10) {
                    Text("Item \($0)")
                        .foregroundColor(.blue)
                        .font(.largeTitle)
                        .frame(width: 340, height: 200)
                        .background(Color(.gray))
                        .cornerRadius(10)
                }
            }
            .frame(maxWidth: .infinity)
        }
        .navigationBarHidden(false)
        .navigationBarTitle("Overview", displayMode: .automatic)
    }
}

You had the navigation item in a ZStack. A ZStack is used to display overlapping views on top of each other.

I believe what you really were looking to achieve stacking the title above the scrollView. That would be achieved with VStack. That however, would still be wrong.

Because it's a navigational setting, it goes inline with the NavigationView. So it can be displayed in the NavigationBar. It doesn't need to be apart of any Stacks.