Force Select над прокручиваемым модалом

Question

Я пытался создать модал, который можно прокручивать и который содержит различные варианты выбора, используя React-Select.Однако, когда вы нажимаете кнопку выбора, и он превышает размер модального окна, он появится в пределах модальной границы и потребует от пользователя прокрутки вниз, чтобы просмотреть остальную часть меню выбора.Я хотел бы, чтобы он отображался сверху / снаружи модального окна.

Простой пример ниже.

const Modal = ({ options }) => (
  <Modal>
    <Form
      onSubmit={onSubmit}
      render={({ handleSubmit, form }) => (
        <form onSubmit={handleSubmit}>
          <Field name='name'>
            {({ input }) => (
              <Select
                {...input}
                name={input.name}
                onBlur={input.onBlur}
                onChange={input.onChange}
                options={options}
              />
            )}
          </Field>
        </form>
      )}
    />
  </Modal>
)

export const Modal = styled(ReactModal)` // imported from my custom modal
  overflow: scroll; // this allows you to scroll the modal, if I change this to visible then the Select will appear on top of the modal background but then you can no longer scroll the modal
`;

Так что я знаю, что переполнение от родителя - это то, что блокирует выбор.Я пытался перезаписать его в Select, но это не решает проблему, с !important или другим способом, и z-index, кажется, не оказывает влияния.

Как мне добиться обоих эффектов (Выберите сверху,прокручивать)