Storybook: ReactDOM.createPortal 메소드 사용시 「대상 컨테이너가 DOM 요소가 아닙니다」오류 발생

버그 설명
ReactDOM.createPortal에서 만든 Modal 구성 요소의 이야기를 추가하고 싶습니다.
모달 컨테이너는 내가 index.html에 추가 한 <div id="modal-root"></div> 입니다.
하지만 이렇게 이야기를 쓸 때 :

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

「대상 컨테이너가 DOM 요소가 아닙니다」오류가 발생했습니다.

Storybook UI에 모달 루트 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)
  }
}

체계:

• 프레임 워크 : 반응
• 애드온 : 애드온 손잡이
• 버전 : 4.0.0-alpha.3