i need to activate the current page with some styling for better user experience. first image is what i have done so far. i have a Parent component called < Dashboard /> inside of it i used **< Outlet />** in order to render these 3 nested child components.

[![desired output](https://i.stack.imgur.com/bv1wF.png)](https://i.stack.imgur.com/bv1wF.png)

---

**but the issue is that first link is always active no matter which link i click. is there any way to open the first tab by default and only add the styles when it's active using react router v6 or in any other way? thank you in advance for any help :)**

[![my issue](https://i.stack.imgur.com/Ym9UF.png)](https://i.stack.imgur.com/Ym9UF.png)

this is my main route code on app.tsx

```
<Route path="dashboard" element={<Dashboard />}>
      <Route index element={<Productivity />} />
      <Route path="incentives" element={<Incentives />} />
      <Route path="development" element={<Development />} />
</Route>

```

---

this is my TabLink component

```
const TabLink:React.FC<Props> = (props) => {
const { link, label } = props;
return (
 <NavLink
  to={link}
  className={
  ({ isActive }) => (isActive
    ? 'text-cyan-400 border-b-4 border-current'
    : '')
  }
>
  <h6 className="hover:border-b-4 h-10 px-6 border-current hover:text-cyan-300">
    {label}
  </h6>
</NavLink>
);
};

```