title: React button onClick requires two click to work second time
body: <p>When the img is pressed the side menu opens fine but when i close the side menu and try to open it again by pressing the img it requires two clicks to open. how do i make it so it works with one click even after i open and close the side menu?</p>
  <pre><code>const Header = () =&gt; {
    let [isOpen, setIsOpen] = useState(false);
    return (
      &lt;header className='homepage-header'&gt;
          &lt;img src={menusvg} alt='' onClick={() =&gt; setIsOpen((isOpen) =&gt; !isOpen)} /&gt;
          {
              isOpen ? &lt;SideMenu /&gt; : null
          }
          &lt;h1&gt;Main Header&lt;/h1&gt;
      &lt;/header&gt;
    )
  }
  </code></pre>
  <p>note: i have another button inside the SideMenu componenet that closes the menu.</p>
  <p>SideMenu:</p>
  <pre><code>function SideMenu() {
    let [isOpen, setIsOpen] = useState(true);
    return (
      &lt;&gt;
          {
              isOpen ? &lt;div className='side-menu'&gt;
                  &lt;p&gt;side menue&lt;/p&gt;
                  &lt;i class=&quot;fas fa-times&quot; onClick={() =&gt; setIsOpen((isOpen) =&gt; !isOpen)}&gt;&lt;/i&gt;
              &lt;/div&gt;
                  : null
          }
      &lt;/&gt;
    )
  }
  </code></pre>