React导航栏汉堡菜单点击菜单项后无法自动关闭的问题求助

大家好，我遇到了一个导航栏的小问题，希望能得到帮忙：当我点击汉堡菜单展开后的菜单项时，汉堡图标一直保持打开状态，不会切换回关闭的样式。我用文字描述下当前的现象：

• 菜单打开时：汉堡图标显示为打开的状态
• 点击菜单项后：页面能正常跳转到对应路由，但汉堡图标依然是打开的样子，没有变回关闭状态

下面是我的Navbar组件代码：

export const Navbar = () => {
const [isOpen, setOpen] = useState(false);


return (
<>
<nav className="bg-pink-300 shadow-lg flex items-center 
justify-around py-3 px-32 sticky top-0 left-0 w-full">
  <Link to="/">
  <span className='font-semibold text-lg flex items-center
  gap-3 text-black hover:text-sky-300 transition 
  duration-300'>
    <GiAbstract037 ></GiAbstract037>
    <span>xFigure</span>
  </span>
  </Link>

  <div className='hidden md:flex items-center gap-5 text-black'>
  <Link to="/" className='py-1 px-3 text-lg font-light text-white 
  hover:text-sky-300 rounded-2x1 hover:bgslate-700 transition 
  duration-300'>
    Home
  </Link>

  <Link to="/new" className='py-1 px-3 text-lg font-light text-white 
  hover:text-sky-300 rounded-2x1 hover:bgslate-700 transition 
  duration-300'>
    New
  </Link>

  <Link to="/popular" className='py-1 px-3 text-lg font-light text-white 
  hover:text-sky-300 rounded-2x1 hover:bgslate-700 transition 
  duration-300 border-r'>
    Popular
  </Link>

  <Link to="/login" className='py-1 px-3 text-lg font-light text-white 
  hover:text-sky-300 rounded-2x1 hover:bgslate-700 transition 
  duration-300'>
     <span className='font-semibold text-lg flex items-center
  gap-3 text-black hover:text-sky-300 transition 
  duration-300'></span>
  <CgProfile />
  </Link>
  </div>

  <div className="md:hidden" onClick={() => setOpen(!isOpen)}>
  <Hamburger size={18} ></Hamburger>
  </div>

  <div className={`absolute md:hidden top-15 left-0
    w-full bg-white flex flex-col items-center gap-7 
    font-semibold text-lg transform-transition 
    ${isOpen ? "opacity-100" : "hidden"}`}
    style={{transition: "transform 0.3s ease, opacity 0.3s ease"}}>
      <Link to="/"className="list-none w-full text-center p-4 
      hover:bg-sky-50 hover:text-white transition-all
      cursor-pointer" onClick={() => setOpen(false) }>Home</Link>

      <Link to="/new"className="list-none w-full text-center p-4 
      hover:bg-sky-50 hover:text-white transition-all
      cursor-pointer" onClick={() => setOpen(false)}>New</Link>

      <Link to="/popular"className="list-none w-full text-center p-4 
      hover:bg-sky-50 hover:text-white transition-all
      cursor-pointer" onClick={() => setOpen(false)}>Popular</Link>

      <Link to="/login"className="list-none w-full text-center p-4 
      hover:bg-sky-50 hover:text-white transition-all
      cursor-pointer" onClick={() => setOpen(false) }>Account</Link>
    </div>

</nav>
</>
)
}

备注：内容来源于stack exchange，提问作者marc