LazyVGrid Section header does not stick (PinnedView) as expected within a horizontal scrollview

I have a simple LazyVGrid embedded in a vertical and then a horizontal scrollviews. The problem I am having is that the section header is not sticking as it should with a horizontal scrollview. Removing the horizontal scrollview the section works as expected. What am I doing wrong?

Here is the code:

struct ContentView: View {
    var body: some View {
        let columns = Array(repeating: GridItem(.flexible(minimum: 100), spacing: 0), count: 6)
        GeometryReader { geo in
            ScrollView {
                ScrollView(.horizontal) { //removing this line works as expected
                    LazyVGrid(columns: columns, alignment: .leading, spacing: 30, pinnedViews: [.sectionHeaders]) {
                        Section(header: Text("Section 1").font(.title)) {
                            ForEach(0...1000, id:\.self) { index in
                                Text("\(index)")
                            }
                        }
                    }.frame(width: 600)
                }
            }
        }.padding()
    }
}