NavHashLink - React does not recognize the `isActive` prop on a DOM element

What I'm trying to do I'm trying to create a navbar that can scroll to elements, on the current page and switch to a different page. I'm currently using React-Router and NavHashLink to do this. So far everything works perfectly. Except my active class isn't being set when I'm at the current URL- an active class is being added to all links, see the example below.

Despite the fact that my URL is http://localhost:3000/#about. This is the error below that I am currently receiving.

and here is my relevant code below. Hope I explained things okay thanks for the help.

import React from "react";
import { NavHashLink, HashLink } from "react-router-hash-link";
import { useState } from "react";
<div className="app__container-width nav__content">
        <HashLink
          onClick={() => {
            setDisplayMobileNav(false);
          }}
          className="logo"
          to={"/#header"}
        >
          <h1>
            K<span>B</span>
          </h1>
        </HashLink>
        <div className={"nav__content-links"}>
          <NavHashLink
          activeclassName="selected"
          activestyle={{fontSize: '10px'}}
            onClick={() => {
              setDisplayMobileNav(false);
            }}
            
            className={"nav-links"}
            to="/#about"
          >
            About
          </NavHashLink>
          <NavHashLink
            onClick={() => {
              setDisplayMobileNav(false);
            }}
            className={"nav-links"}
            to="/#projects"
          >
            Projects
          </NavHashLink>
          <NavHashLink
            onClick={() => {
              setDisplayMobileNav(false);
            }}
            className={"nav-links"}
            to="/#footer"
          >
            Contact
          </NavHashLink>
        </div> ```