Storybook: 「El contenedor de destino no es un elemento DOM」 ocurrió un error al usar el método ReactDOM.createPortal

Describe el error
Me gustaría agregar una historia de mi componente Modal que está hecho por ReactDOM.createPortal.
el contenedor modal es <div id="modal-root"></div> agregado por mí en index.html.
pero cuando escribo una historia como esta:

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

「El contenedor de destino no es un elemento DOM」 ocurrió un error.

Creo que es porque no hay un div de raíz modal en la interfaz de usuario de Storybook.
¿Cómo puedo arreglarlo?

Reproducir
véase más arriba

Capturas de pantalla

Fragmentos de código
este es mi código modal para abreviar:

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

Sistema:

• Marco: reaccionar
• Complementos: addon-knobs
• Versión: 4.0.0-alpha.3