Disclosure.Button's "as={NavLink}" isn't styling when active

I have 2 menu's on a React project, both of which use NavLink to show whether it is active or not.

The normal one works, but the mobile one is build with the HeadlessUI Disclosure.Button...

So I have:

<Disclosure.Button
  as={NavLink}
  to='/'
  className={({ isActive }) => isActive
    ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
    : "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
  }
>
  My Events
</Disclosure.Button>

And the isActive boolean in this one just doesn't work.

I'm assuming that the className I use do not affect the NavLink, but only affects the Button? But I haven't a clue.

The issue isn't with the Router or anything, because the main manu up top works:

<NavLink
  to="/"
  className={({ isActive }) => isActive
    ? "border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
  }
>
  My Events
</NavLink>

Solution

I solved it by chucking the whole Disclosure.Button thing out the window.

The only reason I wanted to use it, was since it was used by the Tailwind CSS people, who uses it to close the Disclosure panel after you clicked the button.

But if you wrap the whole inside of the Disclosure.Panel in:

{({ close }) => (
    ***Your code here***
)}

Then you can simply add an onClick handler on the NavLink which calls the close() function, which will then close the Disclosure panel... i.e.:

<NavLink
            to='/'
            className={({ isActive }) =>
              isActive ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6" : "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
            }
            onClick={() => close()}
            >
            My Events
</NavLink>