title: change burger menu when click on link
body: <p>In the code below, when I click on the burger menu, the design changes from burger to an X and the menu opens successfully. However, when I click on a link within the menu, the menu does close BUT the X menu does NOT change its design back to a burger.In other words, the menu closes but the css of the icon does not change back. Does anyone know what I am doing wrong?</p>
  <pre><code>  const handleClick = (event: any) =&gt; {
      if (!menuOpen) {
        event.currentTarget.classList.add(&quot;open&quot;);
        setMenu(true);
      } else {
        event.currentTarget.classList.remove(&quot;open&quot;);
        setMenu(false);
      }
    };
  </code></pre>
  <pre><code>  &lt;div className=&quot;mt-4 container page-container&quot;&gt;
        &lt;div className=&quot;row&quot;&gt;
          &lt;div className=&quot;d-grid gap-2 pb-3 col-4 mx-auto &quot;&gt;
            &lt;div className=&quot;menu-btn&quot; onClick={handleClick}&gt;
              &lt;div className=&quot;menu-btn_burger&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        {menuOpen &amp;&amp; (
          &lt;div className=&quot;row&quot;&gt;
            &lt;div className=&quot;d-grid gap-2 pt-3 col-6 mx-auto &quot;&gt;
              &lt;Link to=&quot;/add&quot; onClick={handleClick} className=&quot;btn btn-primary btn-sm  &quot;&gt;
                Add Task
              &lt;/Link&gt;
              &lt;Link to=&quot;/&quot; onClick={handleClick} className=&quot;btn btn-primary btn-sm&quot;&gt;
                All Reminders &lt;span className=&quot;badge badge-light text-dark&quot;&gt;{tasks.length &gt; 0 &amp;&amp; tasks.length}&lt;/span&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
          &lt;/div&gt;}
  </code></pre>