title: React useState to change icon using fontawesome not updating
body: <p>I'm trying to change the icon by clicking the icon. The value of isOpen changes on the console, but the icon doesn't change.</p>
  <pre><code>const [isOpen, setIsOpen] = useState(false);
  
  &lt;header className=&quot;w-full h-20 shadow-sm&quot;&gt;
      &lt;div className=&quot;h-full sm:mx-6 md:mx-12 lg:mx-24 xl:mx-48 px-4 xl:px-0&quot;&gt;
        &lt;nav className=&quot;h-full flex justify-between items-center text-lg&quot;&gt;
          &lt;div className=&quot;flex items-center&quot;&gt;
            &lt;p className=&quot;font-bold text-blue z-10&quot;&gt;Shaddam&lt;/p&gt;
            &lt;figure className=&quot;-ml-4 z-0&quot;&gt;
              &lt;img src={BrandIconBg} alt=&quot;Blob&quot; /&gt;
            &lt;/figure&gt;
          &lt;/div&gt;
          &lt;span
            className=&quot;text-blue text-2xl cursor-pointer&quot;
            onClick={() =&gt; setIsOpen(!isOpen)}
          &gt;
            &lt;i className={!isOpen ? &quot;fas fa-bars&quot; : &quot;fas fa-times&quot;}&gt;&lt;/i&gt;
          &lt;/span&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  </code></pre>