How to localize the bg-transparency for a class in TailWindCSS without overriding the child ?

Question

I have a button element in a Header that hosts the text 'ticketblaster' and is wrapped within a NavLink (react-router-dom6) which is itself wrapped in a div class. My other buttons ('Artists', 'Venues', etc as shown below) all render normally and are highlighted properly when clicked. The button is nice and full, be it in active: or focus: as pictured in the first image.

The problem is that the NavLink element that wraps <button>ticketblaster</button> has a strange behavior where it only highlights the bottom half of the <div> or <NavLink> tags. I can get the ideal behavior if I open up DevTools and turn off the a.active {bg-opacity or background-color} but I want to be able to override this as a class right there in the code.

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

function Header({ user, setUser, onLogin, onLogout, loggedIn }) {
  function handleLogout() {
    fetch('/logout', {
      method: 'DELETE',
    }).then(() => onLogout());
  }

  // TODO
  //* dropdown should exit as soon as item is clicked
  //* create a sticky navbar that scrolls along with page

  return (
    <div>
      <div class='navbar bg-base-700 text-primary-content'>
        <div class='navbar-start'>
          <div class='dropdown'>
            <label tabindex='0' class='btn btn-ghost sm:hidden'>
              <svg
                xmlns='http://www.w3.org/2000/svg'
                class='h-5 w-5'
                fill='none'
                viewBox='0 0 24 24'
                stroke='currentColor'>
                <path
                  stroke-linecap='round'
                  stroke-linejoin='round'
                  stroke-width='2'
                  d='M4 6h16M4 12h8m-8 6h16'
                />
              </svg>
            </label>
            <ul
              tabindex='0'
              class='menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-56'>
              <li>
                <NavLink to='/artists'>
                  <button class='uppercase font-bold'>artists</button>
                </NavLink>
              </li>
              <li>
                <NavLink to='/venues'>
                  <button class='uppercase font-bold'>venues</button>
                </NavLink>
              </li>
              <li>
                <NavLink to='/genres'>
                  <button class='uppercase font-bold'>genres</button>
                </NavLink>
              </li>
              <li>
                <NavLink to='/concerts'>
                  <button class='uppercase font-bold'>concerts</button>
                </NavLink>
              </li>
              <div>
                {user === null && (
                  <li>
                    <NavLink class='uppercase font-bold' to='/login'>
                      <button class='uppercase font-bold'>login</button>
                    </NavLink>
                  </li>
                )}
                {user !== null && (
                  <div>
                    <li>
                      <NavLink class='uppercase font-bold' to='/'>
                        <button
                          class='uppercase font-bold'
                          onClick={handleLogout}>
                          logout {user.username}
                        </button>
                      </NavLink>
                    </li>
                  </div>
                )}
              </div>
            </ul>
          </div>
          <div class='navbar-start'>
            <div class='flex-auto p-4 '>
              <NavLink to='/'>
                <button class='btn btn-ghost normal-case active:bg-warning text-5xl'>
                  ticketblaster
                </button>
              </NavLink>
            </div>
          </div>
        </div>

        <div class='navbar-center hidden sm:flex'>
          <div class='flex-auto'>
            <ul class='menu menu-horizontal p-0'>
              <li>
                <NavLink to='/artists'>
                  <button class='uppercase font-bold'>artists</button>
                </NavLink>
              </li>
              <li>
                <NavLink to='/venues'>
                  <button class='uppercase font-bold'>venues</button>
                </NavLink>
              </li>
              <li>
                <NavLink to='/genres'>
                  <button class='uppercase font-bold'>genres</button>
                </NavLink>
              </li>
              <li>
                <NavLink to='/concerts'>
                  <button class='uppercase font-bold'>concerts</button>
                </NavLink>
              </li>
            </ul>
          </div>
        </div>
        <div class='navbar-end hidden sm:flex'>
          <div class='flex-initial'>
            <ul class='menu menu-horizontal float-right p-0'>
              {user === '' && (
                <li>
                  <NavLink class='uppercase font-bold' to='/login'>
                    <button class='uppercase font-bold'>login</button>
                  </NavLink>
                </li>
              )}
              {user !== '' && (
                <div>
                  <li>
                    <button class='uppercase font-bold' onClick={handleLogout}>
                      logout {user.username}
                    </button>
                  </li>
                </div>
              )}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Header;