title: Issue when animating modal component with a Portal using React Hooks
body: <p>I am trying to animate my modal component when the user opens and closes the component. The modal component uses a Portal to mount and unmount on the page, and I'm using CSSTransitionGroup from the react-transition-group library to animate the mount and unmount.</p>
  
  <p>If I use a class based Component for the Portal, everything is working as expected. You can see my full working example here: <a href="https://codepen.io/jeffcap1/pen/eoQZgp" rel="nofollow noreferrer">https://codepen.io/jeffcap1/pen/eoQZgp</a></p>
  
  <p>Here is the Portal snippet as a Class Component:</p>
  
  <pre><code>const portalRoot = document.getElementById("portal");
  class Portal extends React.Component {
      constructor(props) {
          super(props);
          this.el = document.createElement("div");
      }
  
      componentDidMount = () =&gt; {
          console.log("Portal componentDidMount!");
          portalRoot.appendChild(this.el);
      };
  
      componentWillUnmount = () =&gt; {
          console.log("Portal componentWillUnmount!");
          portalRoot.removeChild(this.el);
      };
  
      render() {
          const { children } = this.props;
          return ReactDOM.createPortal(children, this.el);
      }
  }
  </code></pre>
  
  <p>However, when I try to change the Portal component to use the new React Hooks API, specifically useEffect, the content is never added onto the page. You can see the full example here: <a href="https://codepen.io/jeffcap1/pen/YMRXxe" rel="nofollow noreferrer">https://codepen.io/jeffcap1/pen/YMRXxe</a></p>
  
  <p>The Portal snippet as a Functional Component using Hooks is:</p>
  
  <pre><code>const portalRoot = document.getElementById("portal");
  const Portal = ({ children }) =&gt; {
  const el = document.createElement("div");
  
  React.useEffect(() =&gt; {
          console.log("Portal componentDidMount!");
          portalRoot.appendChild(el);
          return () =&gt; {
              console.log("Portal componentWillUnmount!");
              portalRoot.removeChild(el);
          };
      }, []); // eslint-disable-line react-hooks/exhaustive-deps
  
      return ReactDOM.createPortal(children, el);
  };
  </code></pre>
  
  <p>I'm pretty stumped and would really appreciate any insight on what I am doing wrong would be much appreciated.</p>