Storybook: 「الحاوية المستهدفة ليست عنصر DOM حدث خطأ عند استخدام أسلوب ReactDOM.createPortal

وصف الخطأ
أرغب في إضافة قصة لمكوِّن شكلي الذي تم إنشاؤه بواسطة ReactDOM.createPortal.
الحاوية الشكلية هي <div id="modal-root"></div> أضيفت بواسطتي في index.html.
لكن عندما أكتب قصة مثل هذه:

storiesOf('atoms/modal', module)
  .addDecorator(withKnobs)
  .add('Modal', () => (
    <Modal
      isOpen={true}
      onRequestClose={action('onRequestClose')}
    >
      <div>modal</div>
    </Modal>
  ))

「الحاوية المستهدفة ليست عنصر DOM حدث خطأ.

أعتقد أنه بسبب عدم وجود div مشروط في Storybook UI؟
كيف يمكنني إصلاح ذلك؟

لإعادة إنتاج
أنظر فوق

لقطات

مقتطفات الشفرة
هذا هو رمز شكلي للاختصار:

const modalRoot = document.getElementById('modal-root')

class Modal extends React.Component {
  constructor(props) {
    super(props)
    this.el = document.createElement('div')
  }

  componentDidMount() {
    modalRoot.appendChild(this.el)
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el)
  }

  handleClickBackDrop = event => {
   this.props.onRequestClose(event)
  }

  render() {
    const { isOpen, children } = this.props

    if (!isOpen) {
      return null
    }

    const modalUI = (
      <BackDropWrapper
        onClick={this.handleClickBackDrop}
      >
        <ModalWrapper>
          {children}
        </ModalWrapper>
      </BackDropWrapper>
    )

    return ReactDOM.createPortal(modalUI, modalRoot)
  }
}

النظام:

• الإطار: رد فعل
• الإضافات: المقابض الإضافية
• الإصدار: 4.0.0-alpha.3