Why isn't the "activeClass" being applied (i.e., "toggle-menu__active" not being added) when clicking on some items?

Question

I'm currently working with the 'react-scroll' library and have utilized the methods activeClass="toggle-menu__active" and spy={true}. The intention behind this is to apply CSS styles from the class 'toggle-menu__active' when clicking on my items. However, I'm noticing that it's not functioning as expected. There are certain items that don't activate when clicked.

My repository:

https://github.com/jolgo1989/my-portfolio/blob/master/src/componenet/Nav.js

import React, { useState, useEffect } from "react";
import "../styleSheets/Nav.css";
import HamburgerMenu from "./HamburgerMenu";
import { navLinks } from "./Data";
import LinkItem from "./LinkItem";
import { Link } from "react-scroll"; // Import the Link component from react-scroll

const Nav = () => {
  const [isNavOpen, setIsNavOpen] = useState(window.innerWidth > 990);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth <= 990) {
        setIsNavOpen(false);
      } else {
        setIsNavOpen(true);
      }
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [isNavOpen]);

  return (
    <>
      <HamburgerMenu open={isNavOpen} setOpen={setIsNavOpen} />
      {/* Metodo para cerrar y abrir el menu */}
      <nav
        class={`toggle-menu ${
          isNavOpen ? "toggle-menu__open" : "toggle-menu__close"
        }`}
      >
        {/* <div className="toggle-menu__logo">the company logo</div> */}
        <ul className="toggle-menu__list">
          {navLinks.map((link, index) => (
            <li key={index}>
              {/* Use the Link component from react-scroll */}
              <Link
                activeClass="toggle-menu__active"
                spy={true}
                to={link.text.toLowerCase()} // This should match the element's ID you want to scroll to
                smooth={true} // Enable smooth scrolling
                duration={500} // Duration of the scrolling animation
                scrollSpy={true}
                className={`toggle-menu__link `}
              >
                <LinkItem
                  text={link.text}
                  icon={link.icon}
                  iconClassName="icon-nav"
                />
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </>
  );
};

export default Nav;