Hover effect not being applied to SVG Nested in NavLink - css

Question

How do I get the nested SVG to have the same hover effect as the anchor tag? When I hover over one it should change both, but right now they are not being seen as the same entity.
I am trying to apply a style to an SVG on hover. The SVG is nested inside of a NavLink component. The CSS that is class-specific gets applied to the SVG, but the hover for the a tag that the SVG is nested in only applies to the a tag's text. I have tried using just the Link component from react-router-dom. I have noticed that when I removed the text-decoration: none from my CSS, the underline only applies to the text. In the rendered HTML the a tag DOES nest the svg tag.
I have tried wrapping the anchor tag and SVG in a span and giving the span the hover effect, it did not work.
component
import {Link, NavLink} from "react-router-dom";
import logo from '../../assets/LogoOnly_Square_Transparent.png';
import { ReactComponent as CalculatorIcon } from '../../assets/calculator.svg';
import './header.styles.scss';
export const Header = () => {
return (
<nav className="header">
<div className='options'>
<Link className='logo-container' to='/'>
<img src={logo} alt="Logo" className='logo'/>
</Link>
<NavLink to='/calculator' className='header-option'>CALCULATOR<CalculatorIcon className='link-icon'/></NavLink>
</div>
<div className='options-right'>
<Link to='/sign-in-sign-up' className='header-option'>SIGN IN</Link>
</div>
</nav>
)
}
CSS
border-bottom: 1px solid #D1D3D4;
height: 70px;
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 25px;
padding: 5px;
.options {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
.logo-container {
width: 70px;
margin: 5px 0;
height: 100%;
.logo {
height: 100%;
}
}
.header-option {
padding: 10px 15px;
font-size: 16px;
.link-icon {
height: 13px;
fill: #58595B;
margin: auto 5px;
}
&:hover {
color: #4FB47C;
fill: #4FB47C;
}
}
}
a {
text-decoration: none;
color: #58595B;
&:hover {
color: #4FB47C;
fill: #4FB47C;
}
}
.options-right {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
.header-option {
padding: 10px 15px;
}
}
}