react-bootstrap's Modal does not work with React 16

Look like the recent react’s update has cause react-bootstrap modal to stop working. Here are the errors:

This issue is also discussed on react-overlays

https://github.com/react-bootstrap/react-overlays/issues/188

[jquense]

There is no good fix until we can upgrade the underlying portal component to the new react v16 api, which is almost done, we are working through some api considerations in the PR until then tho the modal isn’t supported in v16

[qndrey]

As a workaround one can create new component

import React from 'react'
import { Modal, Fade, utils } from 'react-bootstrap'
import { Modal as ReactOverlayModal } from 'react-overlays'
import classNames from 'classnames'

class BaseModal extends ReactOverlayModal {
  focus = () => {}
}

class BootstrapModal extends Modal {
  render () {
    const {
      backdrop,
      backdropClassName,
      animation,
      show,
      dialogComponentClass: Dialog,
      className,
      style,
      children, // Just in case this get added to BaseModal propTypes.
      onEntering,
      onExited,
      ...props
    } = this.props

    const [baseModalProps, dialogProps] = splitComponentProps(props, BaseModal)

    const inClassName = show && !animation && 'in'

    return (
      <BaseModal
        {...baseModalProps}
        ref={c => {
          this._modal = c
        }}
        show={show}
        onEntering={utils.createChainedFunction(
          onEntering,
          this.handleEntering
        )}
        onExited={utils.createChainedFunction(onExited, this.handleExited)}
        backdrop={backdrop}
        backdropClassName={classNames(
          utils.bootstrapUtils.prefix(props, 'backdrop'),
          backdropClassName,
          inClassName
        )}
        containerClassName={utils.bootstrapUtils.prefix(props, 'open')}
        transition={animation ? Fade : undefined}
        dialogTransitionTimeout={Modal.TRANSITION_DURATION}
        backdropTransitionTimeout={Modal.BACKDROP_TRANSITION_DURATION}
      >
        <Dialog
          {...dialogProps}
          style={{ ...this.state.style, ...style }}
          className={classNames(className, inClassName)}
          onClick={backdrop === true ? this.handleDialogClick : null}
        >
          {children}
        </Dialog>
      </BaseModal>
    )
  }
}

const splitComponentProps = (props, Component) => {
  const componentPropTypes = Component.propTypes

  const parentProps = {}
  const childProps = {}

  Object.entries(props).forEach(([propName, propValue]) => {
    if (componentPropTypes[propName]) {
      parentProps[propName] = propValue
    } else {
      childProps[propName] = propValue
    }
  })

  return [parentProps, childProps]
}

export default BootstrapModal

Or maybe someone has better solution would be nice.