I am trying to create a hover effect on a svg icon using Styled Components. I get the result I want when using a svg from the react-icons library, however the hover does not work for custom svgs that I link from a local folder:

import React from 'react';
import * as f from './FooterElements';
import * as i from 'react-icons/fa';
import { ReactComponent as IconTwitter } from '../../Images/twitter.svg';

<f.SocialIconLink href='https://www.twitter.com/test/' target='_blank' aria-label='Twitter' >
          <i.FaTwitter/> 
</f.SocialIconLink>
<f.SocialIconLink href='https://www.twitter.com/test/' target='_blank' aria-label='Twitter' >
          <IconTwitter/> 
</f.SocialIconLink>

The hover works on i.FaTwitter but does not on IconTwitter. Any idea why that might happen?

The SocialIconLink component that contains the hover effect :

export const SocialIconLink = styled.a`
    color: #fff;
    font-size: 24px;

    &:hover {
        color: #F59AA6;
        transition: 0.3s ease-out;
    }
`;