Picker with hours and minutes

Hi, I'm trying to accomplish this picker:

Right now I have this:

HStack {
                            Spacer()
                            
                            Picker("", selection: $hours){
                                ForEach(0..<4, id: \.self) { i in
                                    Text("\(i) hours").tag(i)
                                }
                            }
                            .pickerStyle(WheelPickerStyle())
                            .frame(width: 180)
                            .clipped()
                            
                            
                            Picker("", selection: $minutes){
                                ForEach(0..<60, id: \.self) { i in
                                    Text("\(i) min").tag(i)
                                }
                            }
                            .pickerStyle(WheelPickerStyle())
                            .frame(width: 180)
                            .clipped()
                            
                            Spacer()
                        }

and even though that works, the design is very bad:

1. the pickers are separated in the UI, is there a better way to do it than my implementation?
2. The most important one, it's visible all the time, I want something like the first image that you click, and it expands, or a popup is presented (not sure which UI is more apple style)

How can I fix the above?

Thank you