How do I ensure visited links do not go purple on react?

I'm making a web app on react using react-router to navigate between pages. It works and I even added active links to go blue. The issue is that, once a link is clicked, it turns purple. I've tried changing it with CSS rules but it hasn't worked.

I'm unsure if the change must be done in react or css.

Below is my code.

Nav.js

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

import navstyles from './navstyles.module.css';

function Nav() {
    return (
        <div>
            <nav className={`${navstyles.navbar}`}>
                <h2 className={`${navstyles.navboxhome}`}>
                    <NavLink
                        exact to="/"
                        activeStyle={{
                            fontWeight: "bold",
                            color: "blue"
                        }}
                    >
                        Home
                    </NavLink>
                </h2>
                <h2 className={`${navstyles.navboxstories}`}>
                    <NavLink
                        exact to="/stories"
                        activeStyle={{
                        fontWeight: "bold",
                        color: "blue"
                    }}
                    >
                        Stories
                    </NavLink>
                </h2>
                <h2 className={`${navstyles.navboxcontact}`}>
                    <NavLink
                        exact to="/contact"
                        activeStyle={{
                        fontWeight: "bold",
                        color: "blue"
                    }}
                    >
                        Contact
                    </NavLink>
                </h2>
            </nav>
        </div>
    );
};

export default Nav;

navstyles.modules.css

.navbar {
    display: grid;
    width: 100%;
    height: 10vh;

    grid-template-columns: repeat(3, 1fr);
}

h2:visited {
  text-decoration: none;
  color:black;
}

[class^="navbox"] {
  background-color: greenyellow;
  border-radius: 1px;
  border-color: black;
  border: 2px;
  border-style: solid;
  display: grid;

/* To place the letter at the center */
  place-items: center;
}

.navboxhome {
  background-color: skyblue;
  display: grid;
  place-items: center;
}

.navboxstories {
  background-color: skyblue;
  display: grid;
  place-items: center;
}

.navboxcontact {
  background-color: skyblue;
  display: grid;
  place-items: center;
}