How do you resize Picker with WheelPickerStyle applied in SwiftUI within an HStack?

Question

I attempted to follow SwiftUI - Placing two pickers side-by-side in HStack does not resize pickers to resize my pickers which works fine without applying styling. But when I apply the WheelPickerStyle the frames seem to overlap and incrementing where one picker should be increments a different picker to the right. For example, incrementing what I think is red would increment blue.

Here is what it looks like with a width defined on the frame and the code below.

struct DatePickerView: View {
    var hoursArray = [Int](0...23)
    var minsArray = [Int](0...60)
    var secondsArray = [Int](0...60)
    
    @State var hoursSelection: Int = 0
    @State var minsSelection: Int = 0
    @State var secsSelection: Int = 0
    
    var body: some View {
        VStack {
            Text("Select time.").font(.headline)
            HStack(spacing: 0) {
                Picker(selection: $hoursSelection, label: Text("Hours")) {
                    ForEach(0..<hoursArray.count) {
                        idx in Text("\(hoursArray[idx])")
                    }
                }
                .frame(width: 50, height: 50, alignment: .center)
                .border(Color.red)
                .pickerStyle(WheelPickerStyle())
                .clipped()
                Picker(selection: $minsSelection, label: Text("Minutes")) {
                    ForEach(0..<minsArray.count) {
                        idx in Text("\(minsArray[idx])")
                    }
                }
                .frame(width: 50, height: 50, alignment: .center)
                .border(Color.green)
                .pickerStyle(WheelPickerStyle())
                .clipped()
                Picker(selection: $secsSelection, label: Text("Seconds")) {
                    ForEach(0..<secondsArray.count) {
                        idx in Text("\(secondsArray[idx])")
                    }
                }
                .frame(width: 50, height: 50, alignment: .center)
                .border(Color.blue)
                .pickerStyle(WheelPickerStyle())
                .clipped()
            }
        }
    }
}

How would you resize the pickers so that when a user clicks the corresponding Picker that Picker increments and not the one to the right?