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」 произошла ошибка.

Я думаю, это потому, что в пользовательском интерфейсе Storybook нет модального корневого div?
Как я могу это исправить?

Воспроизводить
см. выше

Скриншоты

Фрагменты кода
это мой модальный код для краткости:

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)
  }
}

Система:

• Фреймворк: реагировать
• Аддоны: addon-knobs
• Версия: 4.0.0-alpha.3