() => {
      const [isOpen, setIsOpen] = React.useState(true);
      let accordionToggle = isOpen ? "gds-accordion__item gds-accordion__item--active" : "gds-accordion__item";

      return ( 
        <div className="gds-accordion">
          <ul className="gds-accordion-list">
              <li className={accordionToggle}>
                  <h4 className="gds-accordion__item-title" data-gds-accordion-title>Lists
                      <div className="gds-badge">32</div>
                  </h4>
                  <i onClick={()=> setIsOpen(!isOpen)} className="gds-accordion__item-icon"></i>
                  <ul className="gds-accordion__child-items">
                      <li className="gds-accordion__child-item">
                          <h4 className="gds-accordion__child-item-title">Ricardo Vega
                              <div className="gds-badge gds-badge--dark">32</div>
                          </h4>
                      </li>
                      <li className="gds-accordion__child-item gds-accordion__item" data-gds-accordion-item>
                          <h4 className="gds-accordion__child-item-title gds-accordion__item-title" data-gds-accordion-title>David Valdez
                              <div className="gds-badge gds-badge--dark">32</div>
                          </h4>
                          <i className="gds-accordion__child-item-icon gds-accordion__item-icon"></i>
                          <ul className="gds-accordion__child-items">
                              <li className="gds-accordion__child-item gds-accordion__item" data-gds-accordion-item>
                                  <h4 className="gds-accordion__child-item-title gds-accordion__item-title" data-gds-accordion-title>David Valdez
                                      <div className="gds-badge gds-badge--dark">32</div>
                                  </h4>
                                  <i className="gds-accordion__child-item-icon gds-accordion__item-icon"></i>
                                  <ul className="gds-accordion__child-items">
                                      <li className="gds-accordion__child-item">
                                          <h4 className="gds-accordion__child-item-title">Ricardo Vega
                                              <div className="gds-badge gds-badge--dark">32</div>
                                          </h4>
                                      </li>
                                      <li className="gds-accordion__child-item">
                                          <h4 className="gds-accordion__child-item-title">David Valdez
                                              <div className="gds-badge gds-badge--dark">32</div>
                                          </h4>
                                      </li>
                                  </ul>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </li>
              <li className="gds-accordion__item" data-gds-accordion-item>
                  <h4 className="gds-accordion__item-title" data-gds-accordion-title>Controls</h4>
                  <i className="gds-accordion__item-icon"></i>
              </li>
          </ul>
      </div>
      )
    }