iOS 18 Public Beta Navigation Zoom Transition in ForEach

Question

I have a NavigationStack -> ScrollView -> LazyVGrid -> ForEach. The ForEach iterates through the following Array of RootViewButton objects:

private let rootViewButtons: [RootViewButton] = [
    RootViewButton(id: 1, view: AnyView(QuranView()), image: "quran", text: "Quran"),
    RootViewButton(id: 2, view: AnyView(CalendarView()), image: "calendar", text: "Calendar"),
    RootViewButton(id: 3, view: AnyView(EventsView()), image: "events", text: "Events"),
    RootViewButton(id: 4, view: AnyView(DuasView()), image: "duas", text: "Du'as"),
    RootViewButton(id: 5, view: AnyView(ZiaraahView()), image: "ziaraah", text: "Ziaraah"),
    RootViewButton(id: 6, view: AnyView(AmaalsView()), image: "amaal", text: "Amaal"),
    RootViewButton(id: 7, view: AnyView(QuestionsView()), image: "questions", text: "Questions"),
    RootViewButton(id: 8, view: AnyView(DonationsView()), image: "donations", text: "Donations")
]

struct RootViewButton: Identifiable {
    let id: Int
    
    let view: AnyView
    let image: String
    let text: String
}

The ForEach looks like this:

ForEach(rootViewButtons) { button in
    if #available(iOS 18.0, *) {
        NavigationLink {
            button.view
                .navigationTransition(.zoom(sourceID: button.id, in: namespace))
        } label: {
            NavigationButton(button: button)
        }.matchedTransitionSource(id: button.id, in: namespace)
    } else {
        NavigationLink {
            button.view
        } label: {
            NavigationButton(button: button)
        }
    }
}

struct NavigationButton: View {
    @Environment(\.colorScheme) private var colorScheme
    
    let button: RootViewButton
    
    var body: some View {
        VStack(spacing: 15) {
            symbol
            
            Text(button.text)
        }
        .foregroundStyle(Color.primary)
        .bold()
        .frame(maxWidth: .infinity)
        .frame(maxHeight: 75)
        .padding()
        .background(Color(.secondarySystemBackground))
        .clipShape(RoundedRectangle(cornerRadius: 10))
        .padding(2.5)
    }
    
    private var symbol: some View {
        Image("\(button.image)-\(colorScheme == .dark ? "dark" : "light")")
            .resizable()
            .scaledToFit()
            .frame(width: 30, height: 30)
    }
}

I've tested this on an iPhone 15 device running the iOS 18.0 Public Beta (22A5307i) resulting in the following problem:

For some reason, if I navigate to one view e.g. QuranView(), come out of that view and click to navigate to another view e.g. ZiaraahView(), instead of navigating to that view, it navigates to one of the subviews of the first view (QuranView). However, if I scroll before attempting to navigate to the second view, it works fine.

However, when running it on an iPhone 15 Pro simulator running iOS 18.0 (22A5282m), the problem does not occur.

For this reason, I'm pretty sure that the cause of the error is just the public beta being buggy, but just wanted to make sure.