Why is my NavLink Component's active class is not responding as it should?

Question

Guys i just want this NavLink Component, which adds .active class when the one of the page is active in the browser. but is was not working as it should because whenever i try to go to about page then both links are getting .active class

This is Component Code

import React from 'react';
import { NavLink } from "react-router-dom";
import "../App.css";

export default function navbar() {
    return (
        <nav>
            <NavLink to="/" >Home</NavLink>
            <NavLink to="about" >About</NavLink>
        </nav>
    )
}

This is Css Code

nav a{
    padding : 20px;
    text-decoration:none;
  }
  
  nav a.active{
    background-color:cyan;
    color : black;
  }