Cambiar el color del icono de reacción cuando el desplazamiento no funciona correctamente

Estoy tratando de cambiar el color de mi ícono de reacción mientras paso el mouse sobre él. Ahora solo funciona parcialmente. Si el mouse está sobre una parte en blanco del ícono, entonces no cambia de color. Cualquier sugerencia es bienvenida. Gracias

<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

Solución del problema

Puede usar un archivo css simple con :hovery asignar className, o usarstyled-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} />

Manifestación