title: Element around button becoming active after pressing the button multiple times
body: <p>I have this button written in React</p>
  
  <pre><code>&lt;div
                  className="buildingblock-left-container"
                  style={Object.assign(
                      { marginLeft: arrowMarginSize, alignSelf: "center" },
                      leftIsClickable ? styles.clickableButton : styles.notClickableButton
                  )}
                  onClick={updateCurrentProductContainer.bind(this, -1)}
              &gt;
                  &lt;FontAwesomeIcon
                      icon={faChevronLeft}
                      size={arrowIconSize}
                      color={leftIsClickable ? "#b58db8" : "gray"}
                  /&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>It's a FontAwesomeIcon inside a div which has a onClick attribute. When I press on the button multiple times in a row, some elements around it can become blue, active.. Here's a picture to show what I mean</p>
  
  <p><a href="https://i.stack.imgur.com/cS4mJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cS4mJ.png" alt="example"></a></p>
  
  <p>I hope you see what I mean, the image becomes blue and "selected"... This can also happen to text around the clickable div.. How do I prevent this from happening?</p>