How to use the @instructure/ui-utils.createChainedFunction function in @instructure/ui-utils

getRootProps: ({
          onMouseDown,
          onClick,
          ...rest
        } = {}) => {
          return {
            onClick: createChainedFunction(this.handleOpenClose, onClick),
            onMouseDown: createChainedFunction((event) => {
              if (event.target !== this._trigger) {
                event.preventDefault() // prevent trigger from losing focus
              }
            }, onMouseDown),
            ...rest
          }
        },

Object.keys(props).forEach((prop) => {
    // If prop looks like an event handler "on*" and either
    // props[props] or element.props[prop] is a function create a chained function.
    // If only one is a function it will just use that function with no extra overhead.
    // This is necessary in cases where props[prop] is `null` or `undefined` which would
    // otherwise unwantedly override element.props[prop].
    if (prop.indexOf('on') === 0 && (
        typeof props[prop] === 'function' ||
        typeof element.props[prop] === 'function'
    )) {
      mergedProps[prop] = createChainedFunction(element.props[prop], props[prop])
    }
  })

}

      if (shouldContainFocus) {
        // only set aria-expanded if popover can contain focus
        expanded = this.shown ? 'true' : 'false'
      } else {
        expanded = null
      }

      trigger = safeCloneElement(trigger, {
        ref: el => this._trigger = el,
        'aria-expanded': expanded,
        'data-popover-trigger': true,
        onKeyDown: createChainedFunction(this.handleTriggerKeyDown, this.props.onKeyDown),
        onClick: createChainedFunction(onClick, this.props.onClick),
        onBlur: createChainedFunction(this.handleTriggerBlur, this.props.onBlur),
        onFocus: createChainedFunction(onFocus, this.props.onFocus),
        onMouseOut: createChainedFunction(onMouseOut, this.props.onMouseOut),
        onMouseOver: createChainedFunction(onMouseOver, this.props.onMouseOver)
      })
    }

    return trigger
  }

// only set aria-expanded if popover can contain focus
        expanded = this.shown ? 'true' : 'false'
      } else {
        expanded = null
      }

      trigger = safeCloneElement(trigger, {
        ref: el => this._trigger = el,
        'aria-expanded': expanded,
        'data-popover-trigger': true,
        onKeyDown: createChainedFunction(this.handleTriggerKeyDown, this.props.onKeyDown),
        onClick: createChainedFunction(onClick, this.props.onClick),
        onBlur: createChainedFunction(this.handleTriggerBlur, this.props.onBlur),
        onFocus: createChainedFunction(onFocus, this.props.onFocus),
        onMouseOut: createChainedFunction(onMouseOut, this.props.onMouseOut),
        onMouseOver: createChainedFunction(onMouseOver, this.props.onMouseOver)
      })
    }

    return trigger
  }

renderTransition (content) {
    return (
      
        {content}
      
    )
  }

renderEditButton ({ buttonRef, ...rest }) {
    return this.props.renderEditButton({
      buttonRef: createChainedFunction(this.handleEditButtonRef, buttonRef),
      ...rest
    })
  }

defaultFocusElement={this.props.defaultFocusElement}
        open={this.state.open}
      >
        {this.props.children}
      
    )

    if (this.props.transition) {
      content = this.renderTransition(content)
    }

    return (
      
        {content}
      
    )
  }
}

ref,
          onKeyDown,
          onKeyUp,
          ...rest
        } = {}) => {
          return {
            id: this._id,
            ref: createChainedFunction(ref, (el) => this._trigger = el),
            'aria-haspopup': 'listbox',
            'aria-expanded': isShowingOptions,
            'aria-owns': isShowingOptions ? this._listId : null,
            'aria-controls': isShowingOptions ? this._listId : null,
            'aria-describedby': this._descriptionId,
            'aria-activedescendant': isShowingOptions ? highlightedOptionId : null,
            onKeyDown: createChainedFunction(this.handleKeyDown, onKeyDown),
            onKeyUp: createChainedFunction(this.handleKeyUp, onKeyUp),
            ...rest
          }
        },

const cloneButton = (button, onClick) => safeCloneElement(button, {
      onClick: createChainedFunction(button.props.onClick, onClick)
    })

getTriggerProps: ({
          ref,
          onKeyDown,
          onKeyUp,
          ...rest
        } = {}) => {
          return {
            id: this._id,
            ref: createChainedFunction(ref, (el) => this._trigger = el),
            'aria-haspopup': 'listbox',
            'aria-expanded': isShowingOptions,
            'aria-owns': isShowingOptions ? this._listId : null,
            'aria-controls': isShowingOptions ? this._listId : null,
            'aria-describedby': this._descriptionId,
            'aria-activedescendant': isShowingOptions ? highlightedOptionId : null,
            onKeyDown: createChainedFunction(this.handleKeyDown, onKeyDown),
            onKeyUp: createChainedFunction(this.handleKeyUp, onKeyUp),
            ...rest
          }
        },