Why isn't my 'UIDatePicker' displaying properly?

I am using the following Swift in a View Controller to adapt an existing UITextField to a date format.

Code Block 
@IBOutlet weak var productTimeRemainingField: UITextField!
    private var datePicker: UIDatePicker?
    override func viewDidLoad() {
        super.viewDidLoad()
        datePicker = UIDatePicker()
        datePicker?.datePickerMode = .dateAndTime
datePicker?.addTarget(self, action: #selector(newProductViewController.dateChanged(datePicker:)), for: .valueChanged)
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(newProductViewController.viewTapped(gestureRecognizer:)))
        view.addGestureRecognizer(tapGesture)
        productTimeRemainingField.inputView = datePicker
    }
@objc func viewTapped(gestureRecognizer: UITapGestureRecognizer) {
        view.endEditing(true)
    }
@objc func dateChanged(datePicker: UIDatePicker) {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "dd/MM/yyyy hh:mm:ss"
        productTimeRemainingField.text = dateFormatter.string(from: datePicker.date)
        view.endEditing(true)
        if #available(iOS 13.4, *) {
              datePicker.preferredDatePickerStyle = .compact
          }
    }

The above code is working, and allows me to select both a time and date, however when the field is selected, the section where a user selects the time and date is shown right at the bottom of the page, making it nearly impossible to properly make a selection. Does anyone have any idea why this is happening, and how I can fix this so it is shown in the centre of the View Controller (as with the majority of other apps - see here - (h ttps://i.stack.imgur.com/M0os7.png) for an example.

This is a screenshot (h ttps://imgur.com/a/OqKXcR7) as to how the date picker currently is appearing.