React NavLink activeClassName not Working

Question

I create basic a component and use react-router-dom for routing and use activeClassName property but it's not working

anyone has solution for it please help me

here is the working codesandlink: https://codesandbox.io/s/happy-payne-xjcjx8?file=/src/App.js:0-565

here is the code

import "./styles.css";
import { NavLink, Route, Routes } from "react-router-dom";
import { About } from "./About";
import { Contact } from "./Contact";

export default function App() {
  return (
    <div className="App">
      <NavLink to="/" exact activeClassName="active">
        About
      </NavLink>
      <NavLink to="/contact" exact activeClassName="active">
        Contact
      </NavLink>

      <Routes>
        <Route path="/" element={<About />}></Route>
        <Route path="contact" element={<Contact />}></Route>
      </Routes>
    </div>
  );
}