()=>{
      const [isOpen, setIsOpen] = React.useState(false);
      let classToggle = isOpen ? "gds-multi-select gds-button-dropdown--active" : "gds-multi-select";
      return (
        <div className={classToggle}>
          <button className="gds-multi-select__button" onClick={()=> setIsOpen(!isOpen)}>
            Multi-select
          </button>
          <ul className="gds-multi-select__menu">
            <li className="gds-multi-select__menu-item">
              <div className="gds-multi-select__menu-link">
                <div className="gds-form-group gds-multi-select__option">
                  <div className="gds-form-group__checkbox">
                    <label className="gds-form-group__checkbox-label">
                      <input
                        className="gds-form-group__checkbox-input"
                        type="checkbox"
                        value=""
                      />
                      <span className="gds-form-group__checkbox-indicator"></span>Check
                      All
                    </label>
                  </div>
                </div>
              </div>
            </li>
            <li className="gds-button-dropdown__divider"></li>
            <li className="gds-multi-select__menu-item">
              <div
                className="gds-multi-select__menu-link gds-multi-select__menu-link--collapsable"
                data-gds-nested-dropdown
              >
                <div
                  className="gds-form-group gds-multi-select__option"
                  data-gds-form-group
                >
                  <div className="gds-form-group__checkbox">
                    <label className="gds-form-group__checkbox-label">
                      <input
                        className="gds-form-group__checkbox-input"
                        type="checkbox"
                        value=""
                      />
                      <span className="gds-form-group__checkbox-indicator"></span
                      >Checkbox Option
                    </label>
                  </div>
                </div>
                <div className="gds-multi-select__sub-menu" data-gds-nested-menu>
                  <div className="gds-multi-select__menu-link">
                    <div
                      className="gds-form-group gds-multi-select__option"
                      data-gds-form-group
                    >
                      <div className="gds-form-group__checkbox">
                        <label
                          className="gds-form-group__checkbox-label"
                        
                        >
                          <input
                            className="gds-form-group__checkbox-input"
                            type="checkbox"
                            value=""
                          />
                          <span className="gds-form-group__checkbox-indicator"></span
                          >Sub-Menu Checkbox Option
                        </label>
                      </div>
                    </div>
                  </div>
                  <div className="gds-multi-select__menu-link">
                    <div
                      className="gds-form-group gds-multi-select__option"
                      data-gds-form-group
                    >
                      <div className="gds-form-group__checkbox">
                        <label
                          className="gds-form-group__checkbox-label"
                        
                        >
                          <input
                            className="gds-form-group__checkbox-input"
                            type="checkbox"
                            value=""
                          />
                          <span className="gds-form-group__checkbox-indicator"></span
                          >Sub-Menu Checkbox Option
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li className="gds-button-dropdown__divider"></li>
            <li className="gds-multi-select__menu-item">
              <div className="gds-multi-select__menu-link">
                <div
                  className="gds-form-group gds-multi-select__option"
                  data-gds-form-group
                >
                  <div className="gds-form-group__checkbox">
                    <label className="gds-form-group__checkbox-label">
                      <input
                        className="gds-form-group__checkbox-input"
                        type="checkbox"
                        value=""
                      />
                      <span className="gds-form-group__checkbox-indicator"></span
                      >Checkbox Option
                    </label>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      )
    }