How to use the gl-react.listSurfaces function in gl-react

<div>
        <header>
          <div>
            <select value="{surface">
              <option value="">(none)</option>
              {listSurfaces().map(surface =&gt; (
                <option value="{surface.id}">
                  {surface.getGLName()}
                </option>
              ))}
            </select>
            <label>
              <input value="{Visitors.get().indexOf(inspectorVisitorLogger)" type="checkbox">
              console logs
            </label>
          </div>
          {headerBody}
        </header></div>

detectSurface() {
    const surface = listSurfaces()[0];
    this.setSurface(surface);
  }