How to avoid the .searchable from appearing and disappearing?

Question

I am having a lot of buggy behavior on .searchable, on iOS 16.1 (Xcode 14.1). As you can see in the screenshot below. When entering a view with a .searchable component it will overlap with the view in transition and then disappears.

I am trying to make the code as basic as possible.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink {
                    Mailbox().navigationTitle("Inkomend")
                } label: { Label("Inkomend", systemImage: "tray") }
                NavigationLink {
                    Mailbox().navigationTitle("Verstuurd")
                } label: { Label("Verstuurd", systemImage: "paperplane") }
                NavigationLink {
                    Mailbox().navigationTitle("Prullenmand")
                } label: { Label("Prullenmand", systemImage: "trash") }
            }
            .navigationTitle("Postbussen")
            .refreshable {}
        }
    }
}

struct Mailbox: View {
    @State private var searchQuery: String = ""
    
    var body: some View {
        List {
            NavigationLink {
                Text("Detail")
            } label: {
                VStack(alignment: .leading) {
                    Text("Apple").font(.headline)
                    Text("Verify your account.")
                    Text("Fijn dat je deze belangrijke stap neemt om je account te verifiëren.").lineLimit(2).foregroundColor(.secondary)
                }
            }
        }
        .searchable(text: $searchQuery)
    }
}

Answer 1

Like Latin Bhuva said, the new NavigationStack is not intended to be used in this way, a NavigationView would be more correct in this case.

struct ContentView: View {
var body: some View {
    NavigationView {
        List {
            NavigationLink {
                Mailbox().navigationTitle("Inkomend")
            } label: { Label("Inkomend", systemImage: "tray") }
            NavigationLink {
                Mailbox().navigationTitle("Verstuurd")
            } label: { Label("Verstuurd", systemImage: "paperplane") }
            NavigationLink {
                Mailbox().navigationTitle("Prullenmand")
            } label: { Label("Prullenmand", systemImage: "trash") }
        }
        .navigationTitle("Postbussen")
        .refreshable {}
    }
  }
}