How to use the @instructure/ui-utils/lib/react/passthroughProps.pickProps function in @instructure/ui-utils

const {
      formatValue,
      size
    } = this.props

    const props = omitProps(this.props, RangeInput.propTypes)

    const classes = {
      [styles.root]: true,
      [styles[size]]: size
    }

    /* eslint-disable jsx-a11y/no-redundant-roles */
    return (
      
        <div>
          <input> { this._input = c }}
            type="range"
            role="slider"
            id={this.id}
            min={this.props.min}
            max={this.props.max}
            step={this.props.step}
            value={this.value}
            onChange={this.noopChange}
            aria-valuenow={this.value}
            aria-valuemin={this.props.min}</div>

render () {
    const ignoredProps = [
      'type',
      'messages',
      'defaultValue',
      'value'
    ]
    const textInputProps = pickProps(this.props, omitProps(TextInput.propTypes, {}, ignoredProps))
    const { onChange, onKeyDown, onClick, onBlur } = this.props // eslint-disable-line react/prop-types

    return (
      <span>
        
        </span>

render () {
    const {
      layoutWidth,
      trayWidth,
      trayPlacement
    } = this.props

    return (
      <div style="{{">
         { this._layout = node }}
        &gt;
           {
              return (
                <div style="{{">
                  Hello from tray
                </div>
              )
            }}
          /&gt;
          </div>

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

onSelect={this.handleMenuSelect}
          onKeyDown={createChainedFunction(onKeyDown, this.handleMenuKeyDown)}
          onFlyoutDismiss={this.handleFlyoutDismiss}
          ref={el => {
            this._menu = el
            menuRef(el)
          }}
        >
          {children}
        
      
    )

    return (
       {
          this._popover = el
          popoverRef(el)
        }}
      >
        
          {safeCloneElement(this.props.trigger, {
            role: 'button',
            ref: el => { this._trigger = el },
            'aria-haspopup': true,
            id: this._labelId
          })}

{
              this._content = el
              if (typeof contentRef === 'function') contentRef(el)
            }}
          >
            <dialog role="region" open="{this.state.portalOpen">
              {this.renderCloseButton()}
              {children}
            </dialog>

defaultValue
    } = this.props

    const props = omitProps(this.props, Select.propTypes)

    const classes = {
      [styles.root]: true,
      [styles[size]]: size,
      [styles.disabled]: disabled
    }

    const style = width ? { width } : null

    return (
      
        <span style="{style}">
          <select id="{this.id}"> {
              this._select = select
              selectRef.apply(this, [select].concat(args))
            }}
            value={value}
            defaultValue={defaultValue}
            onBlur={onBlur}
            onChange={this.handleChange}
            onKeyDown={this.handleKeyDown}</select></span>

labelledBy={this.labelId}
          hidden={!this.show}
          ref={el => {
            this._menu = el
          }}
          onSelect={this.handleMenuSelect}
          onDismiss={this.handleMenuDismiss}
        >
          {children}
        
      
    )

    return (
      
        
          {safeCloneElement(this.props.trigger, {
            role: 'button',
            tabIndex: 0,
            ref: c => {
              this._trigger = c
            },
            'aria-haspopup': true,
            id: this.labelId

render () {
    return (
      
        {this.renderChildren()}
      
    )
  }
}

render () {
    const Element = getElementType(ToggleGroup, this.props)

    return (
      
      {({ expanded, getToggleProps, getDetailsProps }) => {
        return (