How to create multiple pinned views below each other in SwiftUI?

Question

I'm trying to create a multiple layered scrollView with each layer being pinned when scrolling through the list. Currently, the pinnedViews are pinned on top of each other when scrolling to the bottom. See screenshots for current and desired behaviour.

This is the current view structure:

ScrollView {
    LazyVStack(pinnedViews: [.sectionHeaders]) {
        ForEach(data.firstLayeredViews) { firstLayer in
            Section {
                LazyVStack(pinnedViews: [.sectionHeaders]) {
                    ForEach(firstLayer.secondLayeredViews) { secondLayer in
                        Section() {
                            LazyVStack(pinnedViews: [.sectionHeaders]) {
                                ForEach(secondLayer.thirdLayeredViews) { thirdLayer in
                                    Section() {
                                        LazyVStack {
                                            ForEach(thirdLayer.contents) { content in
                                                Text("Content")
                                            }
                                        }
                                     } header: {
                                         GridCellHeader(title: "Layer 3", level: .thirdLayer)
                                     }
                                }
                            }
                        } header: {
                            GridCellHeader(title: "Layer 2", level: .secondLayer)
                        }
                    }
                }
            } header: {
                GridCellHeader(title: "Layer 1", level: .firstLayer)
            }
        }
    }
}

The level parameter of the GridCellHeader determines the leading padding of the Text.