TreeSelect скрывается позади при использовании его в модальном режиме и попытке открыть его, чтобы увидеть его элементы

Question

Я пытался использовать Ant Design TreeSelect в сочетании с Модальным , но при открытии этого TreeSelect значения дерева скрываются за Модальным.

I попытался использовать более высокое значение z-index, но это не помогло! Любые идеи?

import React from "react";
import ReactDOM from "react-dom";
import { version } from "antd";
import { TreeSelect } from "antd";

import {
  Button,
  ComposedModal,
  ModalBody,
  ModalFooter,
  ModalHeader
} from "carbon-components-react";

import "antd/dist/antd.css";
import "./index.css";

const treeData = [
  {
    title: "Node1",
    value: "0-0",
    key: "0-0",
    children: [
      {
        title: "Child Node1",
        value: "0-0-1",
        key: "0-0-1"
      },
      {
        title: "Child Node2",
        value: "0-0-2",
        key: "0-0-2"
      }
    ]
  },
  {
    title: "Node2",
    value: "0-1",
    key: "0-1"
  }
];

function treeSelectChange(e, value) {
  console.log(e);
  //e.preventDefault()
}

ReactDOM.render(
  <div className="App">
    <h1>antd version: {version}</h1>
    {/* <p>
      Please <b>fork</b> this sandbox to reproduce your issue.
    </p> */}

    <ComposedModal
      open={true}
      // onClose={(e) => this.closeRuleEditorModal(e) }
      className=""
    >
      <ModalHeader title="Rule Editor" className="HeaderToolbar White" />
      <ModalBody>
        <TreeSelect
          // className="on-front"
          style={{
            width: "100%"
          }}
          // value={element.Value}
          dropdownStyle={{
            maxHeight: 400,
            overflow: "auto",
            zIndex: 10000
            // position: "absolute"
          }}
          treeData={treeData}
          // placeholder={element.Name}
          treeDefaultExpandAll
          onChange={treeSelectChange}
        />
      </ModalBody>
      <ModalFooter>
        <Button
          kind="secondary"
          size="small"
          // onClick={(e) => this.closeRuleEditorModal(e) }
        >
          Cancel
        </Button>
        <Button
          kind="primary"
          id="btnSave"
          size="small"
          // onClick={() => this.fabricateCustomizedProject()}
        >
          Save
        </Button>
      </ModalFooter>
    </ComposedModal>
  </div>,
  document.getElementById("root")
);

Чтобы воспроизвести проблему, вы также можете использовать https://codesandbox.io/s/antd-reproduction-template-ci559

Обновление

Это сработало для меня, когда я использовал z-index со значением 10000 (понятия не имею, почему я должен был установить такое высокое значение, кажется, один из css, который я использовал для других компонентов -Modal- использует большой z-индекс внутри).