title: How to implement react icon properly with useState hook?
body: <p>On React, I attempted making a feature to let user can see active feedback on screen by changing its icon when they click it.</p>
  <p>How can I let it change to another icon (e.g. from Box to BoxChecked) once I click it?</p>
  <p>note: I know this code line is the problem...(sob)</p>
  <pre><code>&lt;img src={click} alt=&quot;icon&quot; onClick={handleClick} /&gt;
  </code></pre>
  <p>App.jsx</p>
  <pre><code>import React, { useState } from 'react'
  import './App.css'
  import { GrCheckbox as Box }  from 'react-icons/gr'
  import { GrCheckboxSelected as BoxChecked } from 'react-icons/gr' 
  
  export default function App() {
    const [icon, setIcon] = useState(false);
    const [click, setClick] = useState(Box);
    
    function handleClick() {
      setIcon(!icon); 
      icon ? setClick(Box) : setClick(BoxChecked);
    }
    return (
      &lt;div className=&quot;App&quot;&gt;
          &lt;img src={click} alt=&quot;icon&quot; onClick={handleClick} /&gt;
          &lt;p&gt;Clicked {click} times&lt;/p&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>