title: Core Ui CIcon arrow not getting toggled
body: <p>I have a CoreUi CIcon <code>cilArrowTop</code> and <code>cilArrowBottom</code>. When I'm trying to toggle it based on a boolean value, it's not changing.
  Here's my code:</p>
  <pre><code>  const [sortDate, setSortDate] = useState(false)
  
    const sortPostDate = (response, reverse) =&gt; {
      setSortDate(!reverse);
      response.facebook_ads_posts.data.sort((a, b) =&gt; {
        if (!reverse) {
          return (
            new Date(b.created_time).getTime() -
            new Date(a.created_time).getTime()
          );
        } else {
          return (
            new Date(a.created_time).getTime() -
            new Date(b.created_time).getTime()
          );
        }
      });
    };
  
      return(
                &lt;CIcon
                  style={{ cursor: &quot;pointer&quot; }}
                  onClick={(e) =&gt; {
                    e.preventDefault();
                    sortPostDate(response, sortDate);
                  }}
                  content={
                    sortDate ? freeSet.cilArrowBottom : freeSet.cilArrowTop
                  }
                /&gt;
            )
  </code></pre>
  <p>I'm unable to figure out the issue. Everything looks fine to me.</p>