react-icons and react Router - reactjs

Question

Context
i'm designing a navigation bar for my application and my proyect uses react-router and react-router-dom for managing routing and react-icons for icon retrieving.
Code
import React from 'react';
import { NavLink } from 'react-router-dom';
import { MdAssessment } from 'react-icons/md'
import Styles from './NavBar.module.css'
const NavBar = (props) => {
return (
<nav className={Styles.navBar}>
{navIcon}
<NavLink
activeStyle={{ color : 'red' }}
className={`${Styles.navBar__Dashboard} `}
exact to="/">
<MdAssessment />
</NavLink>
<NavLink
activeStyle={{ color: 'red' }}
className={Styles.navBar__Requests}
to="/requests">
Requests
</NavLink>
<NavLink
activeStyle={{ color: 'red' }}
className={Styles.navBar__Tasks}
to="/tasks">
Tasks
</NavLink>
</nav>
)
}
export default NavBar
Problem
I'm trying to extrapolate activeStyle functionality of NavLink to my icon.
Given that react-icons provides you with component as icons, i'm struggling with which approach should i use:
Should i wrapped in a HOC?
Should i encapsulate in a custom Hook?
Notes
I've tried with both approaches but can't get my head arround it. I've tried implementing useRef, useEffect while reading to location with useLocation hook as well.
Any suggestion for a better implementation of a generic NavIcon feature taking this context into account?

Answer 1

By using curly brackets you are importing the icon as a named import. So the import only works if the file contains a named export of the same name you have assigned it. See this question for more info.
According to the package documentation, this is the correct way to import an icon. Can you check to make sure the named export is the same as you have imported?