title: react modal does not open with useState hook
body: <p>I have a component which renders a <code>react-modal</code>, my problem is the <code>react-modal</code> does not open. <code>modalFileNameOpen</code> <code>useState</code> property does not set properly.</p>
  <pre><code>const [modalFileNameOpen, setmodalFileNameOpen] = useState(false)
  
  const handleFileNameChangeClick = () =&gt; {
      console.log(modalFileNameOpen)    // set to false
      setmodalFileNameOpen(true)     // this does not set the `modalFileNameOpen` to true. 
      console.log(modalFileNameOpen)    // is still false
  }
  
  return (
  &lt;div className=&quot;container-fluid&quot;&gt;
      &lt;input type=&quot;button&quot; className=&quot;btn&quot; onClick={handleFileNameChangeClick} value=&quot;Rename File&quot;&gt;&lt;/input&gt;
  
      &lt;ModalFileName modalFileNameOpen={modalFileNameOpen} /&gt;
  
    &lt;/div&gt;
  )
  </code></pre>
  <p>I have another component <code>ModalFileName</code></p>
  <pre><code>import React, { useState } from 'react';
  import Modal from 'react-modal';
  Modal.setAppElement('#root');
  const ModalFileName = ({ modalFileNameOpen }) =&gt; {
      const [modalIsOpen, setModalIsOpen] = useState(modalFileNameOpen)
  
      return (
          &lt;Modal isOpen={modalIsOpen} onRequestClose={() =&gt; setModalIsOpen(false)}&gt;
              &lt;div&gt;
                  &lt;h1&gt;File Name Change&lt;/h1&gt;
                  &lt;div&gt;
                      &lt;button onClick={() =&gt; setModalIsOpen(false)}&gt;Close&lt;/button&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/Modal&gt;
      )
  }
  
  export default ModalFileName;
  </code></pre>