react-router-dom NavLink - className={(isActive) => { console.log(isActive); return isActive ? "active" : "disabled"; }} not logging isActive

Question

I'm trying to console log isActive. I'm using react-router-dom v6.3.0 and I had seen that there is a feature that allows you to put a function inside className that can make use of the isActive state.

I haven't been able to log anything when I click on a NavLink component. I really don't know what I'm doing wrong. The links work perfectly.

import React from "react";
import { Nav, NavLink, NavMenu, Bars } from "../StyledElements/NavbarStyles";

const Navbar = () => {
  return (
    <>
      <Nav>
        <NavMenu>
          <Bars />
          <NavLink
            to="/"
            className={(isActive) => {
              console.log(isActive);
              return isActive ? "active" : "disabled";
            }}
          >
            Home
          </NavLink>
          <NavLink
            to="/FoodSelection"
            className={(isActive) => {
              console.log(isActive);
              return isActive ? "active" : "disabled";
            }}
          >
            Food Selection
          </NavLink>
          <NavLink
            to="/FoodCheckout"
            className={() => {return console.log('changed!')}}
          >
            Food Checkout
          </NavLink>
        </NavMenu>
      </Nav>
    </>
  );
};

export default Navbar;