title: Display text when hovering over an icon using React-Icon Library
body: <p>so I am attempting to display text when you hover over a mouse.
  I am using React-Icons library and for styling using Styled-Components</p>
  <p>I have 4 icons on my navbar - Home - About - Skills - Work</p>
  <p>Each button is its own component in order for the hover to work properly so when i hover over 1 icon it doesnt display the text for all of them</p>
  <pre><code>import React, { useState } from 'react';
  import { SkillsButton } from './SkillsBtnElements'
  
  const SkillsBtn = () =&gt; {
    const [hover, setHover] = useState(false);
    const onHover = () =&gt; {
      setHover(!hover)
    }
  
    return (
      &lt;div onMouseEnter={onHover} onMouseLeave={onHover} role=&quot;button&quot; tabIndex='-3' &gt;
        { hover ? &quot;SKILLS&quot; : &lt;SkillsButton /&gt; }
      &lt;/div&gt;
    )
  }
  
  export default SkillsBtn;
  </code></pre>
  <p>And for styling i have</p>
  <pre><code>import styled from 'styled-components';
  import { GiGearHammer } from 'react-icons/gi';
  
  export const SkillsButton = styled(GiGearHammer)`
    font-size: 1.75rem;
    color: white;
    flex-grow: 1;
    cursor: pointer;
    @media screen and (max-width: 960px) {
      transition: all 0.2s ease-in-out;
      font-size: 1rem;
      color: white;
    }
    &amp;:hover {
      transition: all 0.2s ease-in-out;
    }
  `;
  </code></pre>
  <p>I do achieve a hover effect, but when I constantly hover the icon the logic seems to get messed up bc then its only the text that appears and when i hover over the text the icon appears...which isn't the desired effect</p>
  <p>Example: <a href="https://gph.is/g/4ARQoRV" rel="nofollow noreferrer">https://gph.is/g/4ARQoRV</a></p>