I hope this doesn't sound too confusing but when I click on an menu item I want my hamburger to show its closed state, currently when I click on an menu item it stays open. I have added some pictures below to show what is happening.

Menu opened

What the hamburger looks after looking on a link

Here is my code

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>
</>

) }