I create a function when I click outside of the sidebar it will hide it and I also have a button that toggles show and hide the sidebar. But when I combined both of them together, the button did not work properly, it only show the sidebar but can't close it, only when I click outside it will close the sidebar

Click OutSide to close function:

     const ref = useRef(null);
  useEffect(() => {
    document.addEventListener("mousedown", Clickout);
    return () => {
      document.removeEventListener("mousedown", Clickout);
    };
  }, []);

  const Clickout = (eve) => {
    if (ref.current && !ref.current.contains(eve.target)) {
      setShow(false);
    }
  };

My Return:

 return (
    <header>
      <div className="head">
        <div className="logo">
          <img src={logo} alt="logo" />
        </div>
        <button
          className="burger"
          onClick={() => {
            setShow(!showMenu);
            console.log("here");
          }}
        >
          <div className={`${showMenu ? "change" : ""} bur1 `}></div>
          <div className={`${showMenu ? "change" : ""} bur2 `}></div>
          <div className={`${showMenu ? "change" : ""} bur3 `}></div>
        </button>
      </div>

      <nav className={showMenu ? "active" : ""} ref={ref}>
        <ul>
          {navItem.map((item) => {
            const { id, url, text } = item;
            return (
              <li key={id}>
                <a href={url}>{text}</a>
              </li>
            );
          })}
        </ul>
      </nav>
    </header>
  );
};

Nav bar CSS:

nav {
  position: fixed;
  right: -100%;
  top: 0;
  width: 60%;
  height: 100vh;
  text-align: center;
  padding-top: 15vh;
  transition: 0.8s ease;
  background-color: blue;
}

nav.active {
  right: 0;
  transition: 0.5s;
}

Thank you.