Context menu responds to random locations

Question

Here is the snippet of the code which creates this list:

ScrollView {
    LazyVGrid(columns: columns, alignment: .leading, spacing: 8) {
        ForEach(viewModel.previews) { item in
            PreviewCard(item: item)
                .contextMenu(
                    ContextMenu(menuItems: {
                        Text("Menu Item 1 \(item.size)")
                    }))
                .cornerRadius(7)
                .shadow(radius: 3)
                .padding(3)
        }
    }
}

struct PreviewCard: View {
    private let item: PreviewPayload
    
    init(item: PreviewPayload) {
        self.item = item
    }
    
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            AsyncImage(url: item.preview) { image in
                image
                    .resizable()
                    .scaledToFill()
                
            } placeholder: {
                ProgressView()
            }
            .frame(width: 100, height: 200)
            
            VStack(alignment: .leading, spacing: 4) {
                Text(TextFormatter.formatSize(item.size))
                
                if let date = TextFormatter.formatDate(item.createdDate) {
                    Text(date)
                }
            }
            .padding()
        }
    }
}

Here is how it looks:

The preview is popping out for the wrong item. I wonder, does it have anything to do with LazyVGrid or am I missing something?

Answer 1

Apparently the problem was the clickable area, added .contentShape(Rectangle()) as the last modifier to the PreviewCard solved it.