'Pickers are Overlapping Each Other Inside HStack - iOS15.2

I have 2 Pickers inside of an HStack. One picker contains letters, the second picker contains numbers. Now my problem is when I scroll the picker for the letters a little bit from the right, the picker with the numbers gets scrolled instead. Now I have been looking for an answer, I was able to find 2.

The first answer was adding these 2 modifiers to my pickers. However this doesn't seem to work for me as of iOS15.2.

.compositingGroup()
.clipped()

The second answer was using a UIViewRepresentable of a UIPickerView. Now the thing is I really don't know how UIViewRepresentable works.

Now I was wondering is there a way to fix this without using UIViewRepresentable? This is how my full code looks like.

struct TestingView: View {
    @State var selectedNumber = "0"
    @State var selectedLetter = "a"
    let letters = ["a", "b", "c", "d", "e", "f"]
    let numbers = ["1", "2", "3", "4", "5", "6"]
    let pickerWidth = UIScreen.main.bounds.width / 2 - 16 - 4
    
    var body: some View {
        HStack {
            VStack {
                Text("Letters")
                Picker("Letter", selection: $selectedLetter) {
                    ForEach(letters, id: \.self) { letter in
                        Text(letter)
                    }
                }
                .pickerStyle(WheelPickerStyle())
                .frame(maxWidth: pickerWidth, minHeight: 120, maxHeight: 120, alignment: .center)
                .compositingGroup()
                .clipped()
            }
            
            VStack {
                Text("Numbers")
                Picker("Number", selection: $selectedNumber) {
                    ForEach(numbers, id: \.self) { number in
                        Text(number)
                    }
                }
                .pickerStyle(.wheel)
                .frame(maxWidth: pickerWidth, minHeight: 120, maxHeight: 120, alignment: .center)
                .compositingGroup()
                .clipped()
            }
        }
    }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source