How can I manage 3 element mode by on click function in next js

I am creating an accordion menu in nextjs , I want 3 mode of an element :

1. the first mode is default, when no click event happened : .mainLi_default
2. when the first click event happening and menu will open with a specific style : .mainLi_open
3. when click event happening in the same element , menu must close with another specific style : .mainLi_recentOpen

export default function Menu() {
  const context = useContext(navItems);
  const listItems = context.listItems;
  const [selectItemId, setSelectItemId] = useState();
  function selectItemHandler(id, item) {
    setSelectItemId(id);
  }

  return (
    <>
      {listItems.map((menuItems) => {
        return (
          <ul key={menuItems.id} className={`${styles.list}`}>
            <li
              id={menuItems.id}
              className={`${styles.mainLi} ${menuItems.id == selectItemId ? styles.mainLi_open : styles.mainLi_default}`}
              onClick={() => {
                selectItemHandler(menuItems.id);
              }}
            >
              <div className={`${styles.options}`}>
                <span>{menuItems.icon}</span>
                <span>{menuItems.title}</span>
                <span>
                  <IoIosArrowDown />
                </span>
              </div>
              <ul className={styles.subMenu}>
                {menuItems.subItems.map((subitem) => {
                  return (
                    <li key={subitem.id}>
                      <Link href={subitem.path}>{subitem.title}</Link>
                    </li>
                  );
                })}
              </ul>
            </li>
          </ul>
        );
      })}
    </>
  );
}

/* used inside : nav-menu/menu/index.js */
.list {
  @apply flex w-full flex-col px-4 py-2;
}
.mainLi {
  @apply w-full;
}
.mainLi .options {
  @apply flex w-full cursor-pointer items-center justify-start gap-2 font-R-bold capitalize;
}
.mainLi .options span:nth-child(1) {
  @apply text-20;
}
.mainLi .options span:nth-child(2) {
  @apply text-16;
}
.mainLi .options span:nth-child(3) {
  @apply ml-auto text-20;
}
.mainLi .subMenu {
  @apply mt-4 flex w-full flex-col gap-2 px-6 font-R-regular capitalize text-secondary;
}
/* menu status classes */
/* Start default status (default) */
.mainLi_default .options span:nth-child(1) {
  @apply text-mute;
}
.mainLi_default .options span:nth-child(2) {
  @apply text-mute;
}
.mainLi_default .options span:nth-child(3) {
  @apply text-mute;
}
.mainLi_default .subMenu {
  @apply hidden text-secondary;
}
/* End default status (default) */
/* Start open status */
.mainLi_open .options span:nth-child(1) {
  @apply text-primary;
}
.mainLi_open .options span:nth-child(2) {
  @apply text-primary;
}
.mainLi_open .options span:nth-child(3) {
  @apply rotate-180 text-secondary;
}
.mainLi_open .subMenu {
  @apply flex text-secondary;
}
/* End open status */
/* START recentOpen status */
.mainLi_recentOpen .options span:nth-child(1) {
  @apply text-secondary;
}
.mainLi_recentOpen .options span:nth-child(2) {
  @apply text-secondary;
}
.mainLi_recentOpen .options span:nth-child(3) {
  @apply rotate-180 text-secondary;
}
.mainLi_recentOpen .subMenu {
  @apply hidden text-secondary;
}
/* End recentOpen status */
/* menu status classes */

I managed first and second modes but for third mode I dont know how to manage last mode