How to use the react-dom-factories.header function in react-dom-factories

renderFilter() {
    const { selectedPane } = this.state;

    const { tabs, filterString = "" } = this.props;

    const { clientType, paramName } = sidePanelItems[selectedPane];

    const targets = getTabsByClientType(tabs, clientType);

    return dom.header(
      {},
      dom.input({
        ref: node => {
          this.filterInput = node;
        },
        placeholder: "Filter tabs",
        value: filterString,
        autoFocus: true,
        type: "search",
        onChange: e => this.onFilterChange(e.target.value),
        onKeyDown: e => {
          if (targets.size === 1 && e.keyCode === 13) {
            this.onTabClick(targets.first(), paramName);
          }
        }
      })

renderPacket(expression) {
    const { packet, showPacket } = expression;
    const headerClassName = showPacket ? "packet-expanded" : "packet-collapsed";
    const headerLabel = showPacket
      ? "Hide expression packet"
      : "Show expression packet";

    return dom.div(
      { className: "packet" },
      dom.header(
        {
          className: headerClassName,
          onClick: this.onHeaderClick
        },
        headerLabel,
        dom.span({ className: "copy-label" }, "Copy"),
        dom.button(
          {
            className: "copy-packet-button",
            onClick: e => this.copyPacketToClipboard(e, packet.result)
          },
          "grip"
        ),
        dom.button(
          {
            className: "copy-packet-button",

render() {
    let {
      currentInputValue,
      evaluate,
    } = this.props;

    return dom.header(
      { className: "console-header" },
      dom.form(
        { onSubmit: this.onSubmitForm, },
        dom.h1({}, "Reps"),
        dom.input({
          type: "text",
          placeholder: "Enter an expression",
          name: "expression",
          value: currentInputValue || "",
          autoFocus: true,
          onChange: this.onInputChange,
          onKeyDown: this.onInputKeyDown,
        }),
        dom.button({
          className: "clear-button",
          type: "button",

renderPacket(expression) {
    let {packet, showPacket} = expression;
    let headerClassName = showPacket ? "packet-expanded" : "packet-collapsed";
    let headerLabel = showPacket ? "Hide expression packet" : "Show expression packet";

    return dom.div({ className: "packet" },
      dom.header({
        className: headerClassName,
        onClick: this.onHeaderClick,
      },
        headerLabel,
        showPacket && dom.button({
          className: "copy-packet-button",
          onClick: (e) => this.copyPacketToClipboard(e, packet)
        }, "Copy as JSON")
      ),
      showPacket &&
      dom.div({className: "packet-rep"}, Rep({object: packet}))
    );
  }