Pinned sections on top of the view in LazyHGrid

Question

I have searched a lot of this issue, How to achieve pinning the section on top of the view while we have horizontal scrolling in LazyHGrid similar to Native Emoji keyboard, we might have a workaround?

Updated

  
        ScrollView(.horizontal) {
            LazyHGrid(rows: rows, spacing: 6, pinnedViews: [.sectionHeaders]) {
                
                ForEach(EmojiCategory.all, id: \.id) { category in
                    Section(header:
                                VStack {
                        Text(category.title)
                                          .font(.caption)
                                          .bold()
                                          .textCase(.uppercase)
                                          .opacity(0.4)
                                  }
                                  .frame(maxHeight: .infinity)
                                  .background(.clear)
                                  
                    ) {
                        ForEach(category.emojis, id: \.id) { emoji in
                            Text(emoji.char)
                                .font(.title)
                        }
                    }
                }
                
            }.frame(height: 180)
        }

Result

Expected Result

Answer 1

Its working fine you are just missing the background, so it won't looks like the items are passing through

 Section(header:
                        VStack {
                Text("Test")
                    .font(.caption)
                    .bold()
                    .textCase(.uppercase)
                    .opacity(0.4)
            }
            .frame(maxHeight: .infinity)
            .background(.white)
            )
            {}