Image picker cameraoverlay within the safe area for Iphone x and above not working

I have created s custom UI and assigned it to the camera overlay of UIImagePickerController as below.

Custom View

    cameraOverlay = RecordView.loadNib()
    cameraOverlay.frame = UIScreen.main.bounds
    cameraOverlay.buttonStartRecording.addTarget(self, action: #selector(buttonStartStopRecordingClicked),
                                                 for: .touchUpInside)
    cameraOverlay.buttonCancel.addTarget(self, action: #selector(buttonCancelClicked), for: .touchUpInside)
    cameraOverlay.buttonSwitchCamera.addTarget(self, action: #selector(buttonCameraSwitchClicked), for: .touchUpInside)
    
    cameraOverlay.buttonFlash.addTarget(self, action: #selector(buttonFlashClicked), for: .touchUpInside)
    cameraOverlay.labelTimer.text = "00:00/\(self.secondsToHoursMinutesSeconds(inputSeconds: recordingTimeLimit))"

Image Picker Controller

    imagePicker.delegate = self
    imagePicker.sourceType = .camera
    imagePicker.mediaTypes = [kUTTypeMovie as String]
    imagePicker.allowsEditing = true
    imagePicker.cameraOverlayView = cameraOverlay
    imagePicker.showsCameraControls = false
    imagePicker.cameraFlashMode = .off
    imagePicker.cameraCaptureMode = .video
    imagePicker.cameraDevice = .rear
    self.present(imagePicker, animated: true, completion: nil)

This works fine with the camera without a notch but UI gets cut from the top behind the notch on iPhone X and above. I somehow need to set my custom overlay within the safe area but not sure how that can be done. Please can someone help me out here. Thanks in advance.

I checked whether the phone has a notch

  var hasNotch: Bool {
    let bottom = UIApplication.shared.delegate?.window??.safeAreaInsets.bottom ?? 0
    return bottom > 0
}

And then handle the Constraints based on that

topHeightConstraint.constant = hasNotch ? 94 : 50
instructionBottomConstriant.constant = hasNotch ? 60 : 40