React - Highlighting active anchor link when jumping to anchor section

I have this code in my list item component:

import { NavHashLink as NavLink } from 'react-router-hash-link';

const navigationItem = props => {

return <li>
    <NavLink
      smooth
      to= {props.link}
      exact={props.exact}
    >
      {props.children}
    </NavLink>
  </li>
};

And in the other component which imports this component I have this:

const navigationItems = props => {
  return (
    <div className="container flex">
      <ul className={props.open ? "mobile-nav" : "main-nav"}>
        <NavigationItem link="/" exact>
          Home
        </NavigationItem>
        <NavigationItem link='#about'>About</NavigationItem>
        <NavigationItem link='#contact'>Contact</NavigationItem>
      </ul>
    </div>
  );
};

So I have this component with ul list which imports first component so I can pass props. I m using react-router-hash-link in the second component in order to achieve smooth scrolling. Home link consists only from '/' while other 2 navigation links are basically anchors to some sections in the page.

The issue is that whenever it scrolls to that section, none of the anchor links become active, only Home page stays active. Is it any way to achieve this with react-router-hash-link or am I missing something?

I solved the issue, I actually used react-scroll for that and it went well.