我有一些按钮的滚动视图，但由于某种原因，点击目标在实际按钮的下方。按钮的背景显示圆形按钮后面有一个正方形。为什么我不能选择内容所在的按钮？
代码：

struct ContentView: View {
    
    let buttons = ["🔮", "🔮"]
    
    @State var selected: Bool = false
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(buttons, id: \.self) { item in
                    Button {
                        UIImpactFeedbackGenerator(style: .light).impactOccurred()
                        selected.toggle()
                    } label: {
                        Text(item)
                            .frame(width: 40, height: 40, alignment: .center)
                            .lineLimit(1)
                            .background(Color(UIColor.lightGray))
                            .overlay(
                                RoundedRectangle(cornerRadius: 20)
                                    .stroke(.black, lineWidth: selected ? 1 : 0)
                            
                            )
                    }
                    .frame(width: 40, height: 40, alignment: .center)
                    .cornerRadius(20)
                    .contentShape(Circle())
                    .background(.red)
                }
            }
            .padding(.horizontal, 10)
        }
        .frame(maxHeight: 40)
    }
}