Change react-icon color when hover not working properly

Question

I'm trying to change my react icon's color while hover on it. Its only partilly working right now. If mouse is over blank part of the icon then its not changing color. Any suggestions are welcome. Thanks

<FaGithub
    className='contactIcon'
    color='#515357'
    size={42}
    onMouseOver={({ target }) =>
        (target.style.color = '#e91f63')
    }
    onMouseOut={({ target }) =>
       (target.style.color = '#515357')
    }
/>

[working part][1]


[not working][2]


  [1]: https://i.stack.imgur.com/AAl14.png
  [2]: https://i.stack.imgur.com/YLeG0.png

Answer 1

You could use plain css file with :hover and assign className, or use styled-components

// style.css
.contactIcon {
  color: #515357;
}

.contactIcon:hover {
  color: #e91f63;
}

// App.js
<FaGithub className="contactIcon" size={42} />

const StyledFaGithub = styled(FaGithub)`
  color: #515357;
  &:hover {
    color: #e91f63;
  }
`;

<StyledFaGithub size={42} />

Demo