Storybook: 「Le conteneur cible n'est pas un élément DOM」 Une erreur s'est produite lors de l'utilisation de la méthode ReactDOM.createPortal

Décrivez le bogue
Je voudrais ajouter une histoire de mon composant Modal qui est fait par ReactDOM.createPortal.
le conteneur modal est <div id="modal-root"></div> ajouté par moi dans index.html.
mais quand j'écris une histoire comme celle-ci:

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

「Le conteneur cible n'est pas un élément DOM」 Une erreur s'est produite.

Je pense que c'est parce qu'il n'y a pas de div racine modale dans l'interface utilisateur de Storybook?
Comment puis-je y remédier?

Reproduire
voir au dessus

Captures d'écran

Extraits de code
c'est mon code modal pour faire court:

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

Système:

• Cadre: réagir
• Modules complémentaires: boutons d'extension
• Version: 4.0.0-alpha.3