[SwiftUI & iOS 15] Changing the blur radius makes the navigation bar overlap with the status bar

Hello Apple,

I have an SwiftUI app and I am currently experiencing a layout issue in iOS 15, if the app is built by Xcode 13.

SwiftUI View has a build-in blur modifier. My app has a lock/unlock feature, I use .blur(radius: ) to hide and unhide the home page. It has been working very well since the introduction of SwiftUI (iOS 13).

However, with the app built with the new Xcode 13 for iOS 15. Changing the blur radius value can make the navigation bar overlap with the status bar (please see the screenshot).

I did the following demo app to show the issue.

import SwiftUI

struct Item {
    let id: Int
    let name: String
}

class ItemManager {
    static func generate() -> [Item] {
        return [Item(id: 1, name: "Hello"), Item(id: 2, name: "World")]
    }
}

struct ContentView: View {
    
    @State private var isLocked = true
    
    var body: some View {
        ZStack {
            // Main Content
            NavigationView {
                ScrollView {
                    ForEach(ItemManager.generate(), id: \.id) { item in
                        NavigationLink(destination: Text(item.name)) {
                            VStack(alignment: .leading) {
                                HStack {
                                    Text(String(item.id))
                                    Text(item.name)
                                }
                                .padding()
                                Divider()
                            }
                        }
                    }
                }
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action: {
                            // Nothing
                        }) {
                            Image(systemName: "plus.circle")
                                .imageScale(.large)
                                .foregroundColor(.red)
                        }
                    }
                }
                .navigationTitle("Items")
            }
            .blur(radius: isLocked ? 20 : 0) // Without blur, there is no overlapping issue.
            
            if isLocked {
                Button(action: {
                    isLocked.toggle()
                }) {
                    Text("Unlock")
                }
            }
        }
    }
    
}

If .blur is removed or the radius value is 0 to 0, there is no overlapping issue.

Does anyone know a workaround?

Thanks in advance.

Best, Neil