我正在尝试为下一个.js/tailwindcss应用创建头组件。导航活动类只有在第二次点击时才显示活动。我希望它在第一次点击时是活动的。我哪里出错了？我应该用tailwindcss指向什么元素来反映活动状态？
navlink.js文件：

import Link from 'next/link';

const NavItem = ({ text, href, active }) => {
  return (
    <Link href={href}>
      <a
        className={`nav__item ${
          active ? 'active underline underline-offset-8' : ''
        }`}
      >
        {text}
      </a>
    </Link>
  );
};

export default NavItem;

标题. js：

import Image from 'next/image';
import React, { useState } from 'react';
import NavItem from './NavItem';
const MENU_LIST = [
  { text: 'About', href: '/about' },
  { text: 'My Work', href: '/MyWork' },
  { text: 'Blog', href: '/blog' },
  { text: 'Contact', href: '/contact' },
];
const Header = () => {
  const [navActive, setNavActive] = useState(null);
  const [activeIdx, setActiveIdx] = useState(-1);

  return (
    <header className="bg-white">
      <nav className="max-w-5xl mx-auto border border-top-gray">
        {/*containment div*/}
        <div className="flex justify-between">
          {/*Logo Container*/}
          <div className="cursor-pointer">
            <a href="/">
              <Image
                src="/../public/images/soulLogo.webp"
                alt="site logo"
                width={233}
                height={144}
              />
            </a>
          </div>

          {/*Link Container*/}

          <div className="hidden md:flex">
            <div
              onClick={() => setNavActive(!navActive)}
              className={`nav__menu-bar md:underline underline-offset-8 decoration-black `}
            ></div>
            <div
              className={`${
                navActive
                  ? 'active underline underline-offset-8 decoration-black'
                  : ''
              } nav__menu-list flex items-center space-x-8 text-gray-700 tracking-wider `}
            >
              {MENU_LIST.map((menu, idx) => (
                <div
                  onClick={() => {
                    setActiveIdx(idx);
                    setNavActive(false);
                  }}
                  key={menu.text}
                >
                  <NavItem active={activeIdx === idx} {...menu} />
                </div>
              ))}
            </div>
          </div>
          {/*Mobile Menu  button*/}
          <div className="flex relative flex-col gap-y-2 cursor-pointer pt-14 pr-3 md:hidden">
            <div className="w-24 h-1 bg-black shadow-gray-700 rounded"></div>
            <div className="w-24 h-1 bg-black shadow-gray-700 rounded"></div>
            <div className="w-24 h-1 bg-black shadow-gray-700 rounded"></div>
          </div>

          {/*Mobile Menu*/}
          <
        </div>
      </nav>
    </header>
  );
};

export default Header;