reactjs navlink activeClassName not working on root

I have using react <Navlink> for active route class like this with tailwind-css:

import { NavLink } from 'react-router-dom';

<NavLink to={'/'} activeClassName="text-orange-600 border-orange-600" className="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-900 border-b-2 border-white hover:border-purple-500">
          Home
</NavLink>

But root (/) is showing always active while I clicked other links.

When go /sale page root / also showing activeclass

I want when go other pages and if /sale then only this links showing activeclasses not others.