title: How to change color onClick on every icon seperatly? React, styled-components
body: <p>I am learning react and styled-components. I am stack trying to change color on every icon seperatly. Is there any solution for this?</p>
  <p>Here is what I want to get:</p>
  <p><a href="https://i.stack.imgur.com/tsANO.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/tsANO.jpg</a></p>
  <p>Here is sample of my code:</p>
  <pre><code>
  import React, { useState } from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  import {
    GiSteak,
    GiCheeseWedge,
    GiFlatfish,
    GiChickenOven,
    GiBroccoli,
  } from &quot;react-icons/gi&quot;;
  
  const StyledDiv = styled.div`
    width: 300px;
    div {
      font-size: 30px;
      color: #828282;
      color: ${({ color }) =&gt; (color ? &quot;green&quot; : &quot;lightGrey&quot;)};
    }
  `;
  
  const Selections = () =&gt; {
    const [color, setColor] = useState(false);
    return (
      &lt;StyledDiv color={color} onClick={() =&gt; setColor(!color)}&gt;
        &lt;p&gt;Select your options&lt;/p&gt;
        &lt;div&gt;
          &lt;GiBroccoli /&gt;
          &lt;GiCheeseWedge /&gt;
          &lt;GiSteak /&gt;
          &lt;GiFlatfish /&gt;
          &lt;GiChickenOven /&gt;
        &lt;/div&gt;
      &lt;/StyledDiv&gt;
  
    );
  };
  </code></pre>