Use createPortal for rendering DivOverlays

src/DivOverlay.js

@@ -1,7 +1,6 @@
 // @flow
 
-import React, { Fragment } from 'react'
-import { render, unmountComponentAtNode } from 'react-dom'
+import { createPortal } from 'react-dom'
 
 import MapComponent from './MapComponent'
 import updateClassName from './utils/updateClassName'
@@ -41,48 +40,30 @@ export default class DivOverlay<
     this.updateLeafletElement(prevProps, this.props)
 
     if (this.leafletElement.isOpen()) {
-      this.renderContent()
+      this.leafletElement.update()
+      this.onRender()
     }
   }
 
   onClose = () => {
-    this.removeContent()
     if (this.props.onClose) {
       this.props.onClose()
     }
   }
 
   onOpen = () => {
-    this.renderContent()
+    this.forceUpdate() // Re-render now that leafletElement is created
     if (this.props.onOpen) {
       this.props.onOpen()
     }
   }
 
   onRender() {}
 
-  renderContent = () => {
-    if (this.props.children == null) {
-      this.removeContent()
-    } else {
-      render(
-        <Fragment>{this.props.children}</Fragment>,
-        this.leafletElement._contentNode,
-        () => {
-          this.leafletElement.update()
-          this.onRender()
-        },
-      )
-    }
-  }
-
-  removeContent = () => {
+  render() {
     if (this.leafletElement._contentNode) {
-      unmountComponentAtNode(this.leafletElement._contentNode)
+      return createPortal(this.props.children, this.leafletElement._contentNode)
     }
-  }
-
-  render() {
     return null
   }
 }

src/Popup.js

@@ -61,7 +61,6 @@ class Popup extends DivOverlay<LeafletElement, Props> {
   }
 
   componentWillUnmount() {
-    this.removeContent()
     const { map } = this.props.leaflet
 
     if (map != null) {

src/Tooltip.js

@@ -33,8 +33,6 @@ class Tooltip extends DivOverlay<LeafletElement, Props> {
   }
 
   componentWillUnmount() {
-    this.removeContent()
-
     const { popupContainer } = this.props.leaflet
     if (popupContainer == null) return