Why is the tap area of LazyVGrid items larger than expected when using .clipped() in SwiftUI?

I'm building a photo gallery app in SwiftUI using LazyVGrid and encountering unexpected tap behavior. In my ContentView's body, I display a thumbnail for each photo in a ForEach loop. Tapping an item sometimes opens a different photo than the one I intended to tap. I noticed that if I comment out the .clipped() modifier on ThumbnailView, the overlapping view layers become visible, which seems to be causing the issue.

I expected that specifying the view size with .frame() would restrict both the visual appearance and the hit-testing area. However, the extra padding and clipping seem to allow touch events outside the intended bounds.

Here's my code:

SWIFTCopied
import SwiftUI
import Photos
import CoreImage
import ImageIO
import AVKit
import AVFoundation

struct Content: Identifiable {
    let id = UUID()
    let phAsset: PHAsset
    let index: Int
}

struct ContentView: View {
    @State private var contents: [Content] = []
    @State private var selectedContent: Content? = nil
    @State private var isLoading: Bool = true

    var body: some View {
        NavigationView {
            let minItemWidth: CGFloat = 100
            let spacing: CGFloat = 2
            let screenWidth = UIScreen.main.bounds.width
            let columns = Int((screenWidth + spacing) / (minItemWidth + spacing))
            let totalSpacing = spacing * CGFloat(columns - 1)
            let itemWidth = (screenWidth - totalSpacing) / CGFloat(columns)
            ZStack {
                ScrollView {
                    LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))], spacing: 2) {
                        ForEach(contents) { content in
                            ThumbnailView(content: content.phAsset)
                                .frame(width: itemWidth, height: itemWidth)
                                .onTapGesture {
                                    selectedContent = content
                                }
                                .padding(4)
                                .background(Color.blue.opacity(0.5))
                                .clipped()
                        }
                    }
                    .padding(2)
                }
                .navigationTitle("Photos Library")
                .onAppear(perform: loadContents)
                .sheet(item: $selectedContent) { content in
                    NavigationView {
                        DetailImageView(asset: content.phAsset)
                            .navigationBarItems(trailing: Button("Done") {
                                selectedContent = nil
                            })
                    }
                }

                if isLoading {
                    ProgressView("Loading...")
                        .progressViewStyle(CircularProgressViewStyle())
                        .scaleEffect(1.5, anchor: .center)
                }
            }
        }
    }

    func loadContents() {
        PHPhotoLibrary.requestAuthorization { status in
            if status == .authorized {
                fetchContents()
            }
        }
    }

    func fetchContents() {
        let fetchOptions = PHFetchOptions()

        DispatchQueue.global(qos: .background).async {
            self.isLoading = true
            let fetchResult = PHAsset.fetchAssets(with: fetchOptions)
            var fetchedContents: [Content] = []
            var index = 0
            fetchResult.enumerateObjects { (phAsset, _, _) in
                fetchedContents.append(Content(phAsset: phAsset, index: index))
                index += 1
            }
            self.isLoading = false

            DispatchQueue.main.async {
                contents = fetchedContents
            }
        }
    }
}

struct ThumbnailView: View {
    let content: PHAsset
    @State private var image: UIImage? = nil

    var body: some View {
        Group {
            if let image = image {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFill()
            } else {
                Color.gray
            }
        }
        .onAppear(perform: loadImage)
    }

    func loadImage() {
        let imageManager = PHImageManager.default()
        let requestOptions = PHImageRequestOptions()
        requestOptions.isSynchronous = false
        imageManager.requestImage(for: content, targetSize: CGSize(width: 100, height: 100), contentMode: .aspectFill, options: requestOptions) { (image, _) in
            self.image = image
        }
    }
}

struct DetailImageView: View {
    let asset: PHAsset
    @State private var image: UIImage?

    var body: some View {
        Group {
            if let image = image {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .edgesIgnoringSafeArea(.all)
            } else {
                ProgressView()
            }
        }
        .onAppear(perform: loadFullImage)
    }

    func loadFullImage() {
        let manager = PHImageManager.default()
        let options = PHImageRequestOptions()
        options.deliveryMode = .highQualityFormat
        options.isNetworkAccessAllowed = true

        manager.requestImage(
            for: asset,
            targetSize: PHImageManagerMaximumSize,
            contentMode: .aspectFit,
            options: options
        ) { result, _ in
            image = result
        }
    }
}

I am new to SwiftUI and iOS programming, so any guidance on how to limit the hit test area to match the visual frame (perhaps by using modifiers like .contentShape) would be greatly appreciated.