Datepicker скрыт под div

Question

Всплывающее окно выбора даты в Formik скрыто / обрезано под внешним элементом div. Внешний div имеет класс formContainer.

component.jsx

  render() {
    const { showForm, containerHeight } = this.state;
    return (
      <div
        className={`${css.formContainer} ${showForm ? css.open : ''}`}
        ref={this.containerRef}
        style={{ minHeight: containerHeight }}
      >
        <div
          role="button"
          onClick={this.showForm}
        >
          <span className={css.formTitle}>{trans('assign-learning')}</span>
          {
            !showForm
            && (
            <InteractionButton
              description={trans('add learning')}
              active={false}
              iconClass={css.addLearningIcon}
            />
            )
          }
        </div>
          <Formik
            initialValues={{
              content: [],
              linkedUsers: [],
              dueDate: '',
              notifyIndividuals: false,
            }}
            onSubmit={this.assignLearning}
            render={this.assignLearningForm}
           />
      </div>
    );
  }

styles.css

.formContainer {
  border: 1px solid var(--backgroundColourFaint);
  border-radius: 0.25rem;
  padding: 0 2rem;
  margin-bottom: 2rem;
  overflow: hidden;
  box-sizing: padding-box;
  background-color: var(--backgroundColourStrong);
  &:not(.open) {
    transition: min-height 0.5s ease-in-out;
    max-height: $unopenFormHeight;
    min-height: $unopenFormHeight;
  };
  &.open {
    transition: all 0.75s ease-in-out;
    max-height: 1000px;
  }
}

Когда я удаляю переполнение: скрыто;из .formContainer, форма отображается немедленно, т.е. не зависит от функциональности showForm.