SwiftUI UIDatePicker .compact不会直接转到弹出窗口

我使用创建了一个自定义的DatePicker UIDatePicker，当我选择该字段时，它在屏幕底部将日期和时间显示为选项，而无需直接转到弹出窗口。不确定如何描述它，因此请参见下图：

请在下面查看我的代码：

import SwiftUI

struct CustomDateTimePicker: View {
@State private var date: Date?
@State private var time: String? = "Time"

var body: some View {
    HStack {
        Image("Time")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 22.0, height: 22.0, alignment: .center)
        DateField("", date: self.$date)
            .font(.system(size: 19, weight: .light, design: .rounded))
            .foregroundColor(Color.gray)
    }.padding()
    .frame(width: 200, height: 100)
    .background(Color.white)
    .cornerRadius(8)
    .shadow(color: Color.black.opacity(0.1), radius: 30, x: 0 , y: 15)
}
}

class DateTextField: UITextField {
// MARK: - Public properties
@Binding var date: Date?

// MARK: - Initializers
init(date: Binding<Date?>) {
    self._date = date
    super.init(frame: .zero)
    
    if let date = date.wrappedValue {
        self.datePickerView.date = date
    }
    
    self.datePickerView.addTarget(self, action:  #selector(dateChanged(_:)), for: .valueChanged)
    self.inputView = datePickerView
    self.tintColor = .clear
    self.font = UIFont.systemFont(ofSize: 18.0, weight: .medium)
}

@available(*, unavailable)
required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

// MARK: - Private properties
private lazy var datePickerView: UIDatePicker = {
    let datePickerView = UIDatePicker()
    datePickerView.datePickerMode = .dateAndTime
    datePickerView.minuteInterval = 5
    if #available(iOS 14.0, *) {
        datePickerView.preferredDatePickerStyle = .compact
        datePickerView.sizeToFit()
    } else {
        datePickerView.preferredDatePickerStyle = .wheels
    }
    return datePickerView
}()

// MARK: - Private methods
@objc func dateChanged(_ sender: UIDatePicker) {
    self.date = sender.date
}
}

struct DateField: UIViewRepresentable {
// MARK: - Public properties
@Binding var date: Date?

// MARK: - Initializers
init<S>(_ title: S, date: Binding<Date?>, formatter: DateFormatter = .yearMonthDay) where S: StringProtocol {
    self.placeholder = String(title)
    self._date = date
    self.textField = DateTextField(date: date)
    self.formatter = formatter
}

// MARK: - Public methods
func makeUIView(context: UIViewRepresentableContext<DateField>) ->  UITextField {
    textField.placeholder = placeholder
    return textField
}

func updateUIView(_ uiView: UITextField, context:   UIViewRepresentableContext<DateField>) {
    if let date = date {
        uiView.text = formatter.string(from: date)
    }
}


// MARK: - Private properties
private var placeholder: String
private let formatter: DateFormatter
private let textField: DateTextField
}

extension DateFormatter {
    static var yearMonthDay: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateFormat = "dd MMM yyyy HH:mm"
        return formatter
    }
}

struct CustomDateTimePicker_Previews: PreviewProvider {
    static var previews: some View {
        CustomDateTimePicker()
    }
}

单击字段后，如何不必在底部选择日期/时间，如何显示紧凑菜单？