Changing style of Component inside NavLink

I am making a navbar, using NavLink from React-Router-Dom. Using 'isActive' prop to style the active Link, is okay. But, how could I style the subelements inside of it. To be exact, please see this ...

const Nav = [
{path : '/', icon : <NavIcon.Home />},
{path : '/service', icon : <NavIcon.Service />}
]

function someFunc(){
return (
Nav.map(({path, icon}) => (
<NavLink key={path} to ={path}>
{icon} //this icon is actually an svg icon and i want to change its 'fill' attr. conditionally, when the navLink is active or not. I am using .ts
</NavLink>
))}
}

const Home = () => {
<svg ....other attributes ....  fill ={isActive ? 'color1' : 'color2'}> //I want this fill to be conditional so based on as to link is active or not. (**this svg exists into different component, as so do the NavLink**).
...
</svg>
}

how should I use 'isActive' from navLink inside of my svg component? and connect to 'isActive' inside of inside of entirely different component?

ps : - I TRIED making interface type in svg component as

interface Props extends NavLinkProps {
isActive : boolean;
}

const Home = ({isActive} : Props) => {
return (
<svg fill ={isActive ? 'color1' : 'color2'}>
...
</svg>
)
}

and then tried using this into my Nav.tsx component

const Nav = [
{path : '/', icon : <NavIcon.Home isActive = {'what should I put here?'} />},
    {path : '/service', icon : <NavIcon.Service isActive = {} />}
]

return (
<NavLink to ={path} key ={path} className = {({isActive}) => isActive ? 'class1' : 'class2'}>
{icon}
</NavLink>
)

"My main aim is to change the 'fill color' of the svg wrapped around NavLink , based on whether the NavLink is active or not"