使用CSS关闭汉堡菜单

Question

我在移动设备上出现一个汉堡菜单，我想在单击锚链接并转到同一页面时关闭菜单。现在即使页面在另一部分上，菜单也保持打开状态，这是我现在拥有的代码。

const [checkboxMenu, setCheckboxMenu] = useState(false)

    input[type='checkbox']:checked ~ .menu {
      transition: 0.5s ease-in-out !important;
      left: 0 !important;
      opacity: 1 !important;
      top: 13% !important;
    }

    .menu {
      width: 100% !important;
      height: 47vh !important;
      max-height: 70vh !important;
      overflow: auto !important;
      background-color: #fff !important;
      transition: 0.3s ease-in-out !important;
      display: flex !important;
      justify-content: flex-start !important;
      align-items: center !important;
      flex-direction: column !important;
      position: absolute !important;
      left: 0 !important;
      top: -60% !important;
      border-top: 1px solid rgb(241 241 241) !important;
      z-index: 9999;
    }

             <input id="input-hamburger" type="checkbox" value={checkboxMenu} />
          <label
            htmlFor="input-hamburger"
            onClick={() => setCheckboxMenu(!checkboxMenu)}
          >
            <div>
              <span />
            </div>
          </label>
            
            <div className="menu" id="menu">
              <ul>
               <li>
                <Link to="/#plan" className="menu-item">
                  <span className="font-semibold header-a-active">
                    Plan
                  </span>          
                </Link>
               </li>
               <li>
                <Link to="/#internet" className="menu-item">
                  <span className="font-semibold header-a-active">
                    Benefits
                  </span>
                </Link>
               </li>
               <li>
                <Link to="#contact" className="menu-item">
                  <span className="font-semibold header-a- 
                   active">Conctat
                  </span>
                </Link>
               </li>
              </ul>
             </div>