Выровнять по центру дату-время внутри модального окна

Я создаю модальное окно, которое позволит пользователю выбирать дату и время. Я использую компонент response-datetime.

Вот мой код:

<div className = "date-time-modal">
  <div className = "date-time-modal-container">
    <div className = "date-time-modal-button">
      <Button onClick = {this.handleCloseModal} type = "noborder">
        <Icon name = "window-close" size = {"2x"} />
      </Button>
    </div>
    <div className = "date-time-modal-title">
      "Please select date and time:"
    </div>
    <div className = "date-time-modal-calendar"> 
      <DateTime input = {false} />
    </div>
  </div>
</div>

И мой стиль:

.date-time-modal {
    position: fixed;
    z-index: 1;
    padding: 5%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: $ux-theme-color-modal-brackground;
    display: flex;
    align-items: center;
    justify-container: center;

}

.date-time-modal-container {
    background-color: $ux-theme-color-template-header;
    padding: 20px;

}

.date-time-modal-button {
    flex: 1;
    text-align: right;
}

.date-time-modal-title {
    flex: 1;
    text-align: left;
}

.date-time-modal-calendar {
    flex: 1;
}

.date-time-modal-calendar * {
    text-align: center;
}

Каждый раз, когда открывается модальное окно, календарь блокируется с левой стороны. Если я выбираю сборщик времени, он складывается.

Ниже текущего рендера (проверьте, сложено ли окно выбора времени и все выровнено по левому краю):

Мне нужно, чтобы средство выбора было сосредоточено на родителе, а средство выбора дома работало нормально (не считая часа и минут).