Ionic modal animation issue when showing and hiding keyboard

Question

I have an IonModal that slides up from the bottom of the display and has input fields. When fields are selected to be edited, keyboard shows but the modal does not animate.

Modal shows with animation, but when keyboard shows, modal does not animate but jumps up immediately.

When hiding the modal, animates the down with the keyboard and disappears from the screen instead of sliding down the display.

Anything that I am missing or is this default behavior?

As a side note, I have to leave some space in the modal otherwise the modal contents gets hidden behind the keyboard - which is also annoying.

Here is the video:

Here is the code in case relevant:

    <IonModal
      ref={modalRef}
      breakpoints={[0, 0.4]}
      canDismiss={!isDirty}
      handle={false}
      initialBreakpoint={0.4}
      isOpen={isOpen}
      onDidDismiss={onClose}>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonButton onClick={handleClickCancel}>{isDirty ? "Cancel" : "Close"}</IonButton>
          </IonButtons>
          <IonTitle>{isNew ? "New" : "Edit"} Person</IonTitle>
          <IonButtons slot="end">
            <IonButton disabled={!isValidForm} onClick={handleClickSave}>
              Save
            </IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <EditPerson editPerson={editPerson} onChange={(editPersonScoped) => setEditPerson(editPersonScoped)} />
    </IonModal>