How to use the searchkit.renderComponent function in searchkit

renderCell(hit, column, idx){
    const { cellComponent } = this.props

    const key = ((typeof column) === "string") ? column : column.key
    var element;
    if (cellComponent){
      return renderComponent(cellComponent, {hit, columnKey: key, key, column, columnIdx: idx})
    } else {
      return {hit._source[key]}
    }
  }

render():React.ReactElement {
      const { title, containerComponent, rangeComponent } = this.props
    return renderComponent(containerComponent, { title }, 
        renderComponent(rangeComponent, this.state)
    )
  }

render() {
    const { listComponent, filterPrefix } = this.props;
    let options = this.accessor.options.options;
    options = options.filter((sort) => {
      const keyPrefix = sort.key.split(':')[0];
      return keyPrefix === filterPrefix || keyPrefix === 'common';
    });
    const selected = [this.accessor.getSelectedOption().key];
    const disabled = !this.hasHits();

    return renderComponent(listComponent, {
      mod: this.props.mod,
      className: this.props.className,
      items: options,
      selectedItems: selected,
      setItems: this.setItems.bind(this),
      toggleItem: this.toggleItem.bind(this),
      disabled: disabled,
      urlBuilder: item => this.accessor.urlWithState(item.key),
      translate: this.translate
    });
  }
}

renderRangeComponent(component) {
    const { min, max } = this.props
    const state = this.accessor.state.getValue()
    return (
      <div>
        <div style="{{padding:">
          {renderComponent(component, {
            min, max,
            minValue: Number(get(state, "min", min)),
            maxValue: Number(get(state, "max", max)),
            items: this.accessor.getBuckets(),
            onChange: this.sliderUpdate,
            onFinished: this.sliderUpdateAndSearch
          })}
        </div>
      </div>
    )
  }
}

render() {
        let {
            containerComponent, autosuggestComponent,
            id, title, multi, itemComponent
        } = this.props
        let selectedValues = this.accessor.state.getValue()

        return renderComponent(containerComponent, {
            title,
            className: id ? `filter--${id}` : undefined
        }, (
                renderComponent(autosuggestComponent, {
                    multi,
                    loadOptions: this.search,
                    onSelect: this.select,
                    selectedValues,
                    itemComponent
                })
            ))
    }
}

render() {
    const { listComponent, containerComponent, showCount, title, id } = this.props
    return renderComponent(containerComponent, {
      title,
      className: id ? `filter--${id}` : undefined,
      disabled: !this.hasOptions()
    }, [
      renderComponent(listComponent, {
        key:"listComponent",
        items: this.getItems(),
        itemComponent:this.props.itemComponent,
        selectedItems: this.getSelectedItems(),
        toggleItem: this.toggleFilter.bind(this),
        setItems: this.setFilters.bind(this),
        docCount: this.accessor.getDocCount(),
        showCount,
        translate:this.translate
      }),
      this.renderShowMore()

render() {
    let hits = this.getHits();
    let hasHits = hits.length > 0;

    if (this.props.blockSearch) return null;

    if (!this.isInitialLoading() && hasHits) {
      const {listComponent, mod, className, itemComponent, additionalFields} = this.props;

      return renderComponent(listComponent, {
        hits, mod, className, itemComponent, additionalFields
      });
    }

    return null;
  }
}

render(){    
        let { 
            containerComponent, autosuggestComponent, 
            id, title, multi
        } = this.props
        let selectedValues = this.accessor.state.getValue()

        return renderComponent(containerComponent, {
            title,
            className: id ? `filter--${id}` : undefined
        }, (
            renderComponent(autosuggestComponent, {
                multi,
                loadOptions:this.search,
                onSelect:this.select,
                selectedValues
            })         
        ))
    }
}

render() {
    const { listComponent, containerComponent, showCount, title, id } = this.props
    return renderComponent(containerComponent, {
      title,
      className: id ? `filter--${id}` : undefined,
      disabled: !this.hasOptions()
    }, [
      renderComponent(listComponent, {
        key:"listComponent",
        items: this.getItems(),
        itemComponent:this.props.itemComponent,
        selectedItems: this.getSelectedItems(),
        toggleItem: this.toggleFilter.bind(this),
        setItems: this.setFilters.bind(this),
        docCount: this.accessor.getDocCount(),
        showCount,
        translate:this.translate
      }),
      this.renderShowMore()
    ]);
  }