<div id="root"></div>

.menuWrapper {
  background-color: rgba(gray, 0.5);
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  &__active {
    transform: none;
  }
  .menu {
    background-color: rgb(135, 228, 171);
    width: 60vw;
    height: 100vh;
    display: flex;
    .menuList {
      margin: auto;
    }
  }
}

const { useState } = React;

const App = () => {
  const [isShow, setIsShow] = useState(false);
  const closeWithClickOutSideMethod = (e, setter) => {
    console.log("e.target", e.target);
    console.log("e.currentTarget", e.currentTarget);
    if (e.target === e.currentTarget) {
      //メニューの外側をクリックしたときだけメニューを閉じる
      console.log("メニューの外側をクリックした");
      setter(false);
    } else {
      console.log("メニューの内側をクリックした");
    }
  };

  return (
    <div>
      <button
        onClick={() => {
          setIsShow(!isShow);
        }}
      >
        toggle menu
      </button>
      <div
        className={`menuWrapper ${isShow ? "menuWrapper__active" : ""}`}
        onClick={(e) => {
          closeWithClickOutSideMethod(e, setIsShow);
        }}
      >
        <div className="menu">
          <ul className="menuList">
            <li>ここを押しても閉じない</li>
            <li>でも枠外のグレーを押すと</li>
            <li>閉じるよ</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));