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

const {
      open,
      insertAt,
      onOpen,
      onClose,
      mountNode,
      children,
      elementRef,
      ...props
    } = this.props

    // Create node if it doesn't already exist
    if (!this.DOMNode) {
      const node = document.createElement('span')
      const attributes = {
        ...passthroughProps(props),
        dir: this.dir
      }

      Object.keys(attributes).forEach((name) => {
        node.setAttribute(name, attributes[name])
      })

      elementRef(node)

      this.DOMNode = node
    }

    // Append node to container if it isn't already
    if (this.DOMNode.parentNode !== this.state.mountNode) {
      if (insertAt === 'bottom') {
        this.state.mountNode.appendChild(this.DOMNode)

maxHeight,
      minHeight,
      padding,
      textAlign,
      children,
      elementRef,
      ...props
    } = this.props
    // TODO: clean this up when selected and disabled props are removed in 7.0:
    const isSelected = selected || props.isSelected
    const isDisabled = disabled || props.isDisabled
    const isHidden = !isSelected || !!isDisabled

    return (
      <div aria-hidden="{isHidden" aria-labelledby="{labelledBy}" id="{id}" role="tabpanel">
        </div>

renderPill (focused, getTriggerProps) {
    const {
      margin,
      children,
      variant,
      color,
      as,
      elementRef,
      text,
      ...props
    } = this.props

    const filteredProps = passthroughProps(props)

    const containerProps = typeof getTriggerProps === 'function'
      ? getTriggerProps(filteredProps) : filteredProps

    let actualColor = variant
    if (!actualColor) {
      // usng new color props
      actualColor = color
    } else {
      // using old variant
      if (variant === 'primary') {
        actualColor = 'oldPrimary'
      }
    }

    const classes = classnames({

const alignItems = this.props.alignItems || (direction === 'column' || direction === 'column-reverse' ? 'stretch' : 'center')

    const backwardsDisplay = inline ? 'inline-flex' : null

    const classes = {
      [styles.root]: true,
      [styles[`justifyItems--${justifyItems}`]]: true,
      [styles[`alignItems--${alignItems}`]]: true,
      [styles[`wrap--${wrap}`]]: wrap !== 'no-wrap',
      [styles.wrapItems]: wrapItems
    }

    if (children && React.Children.count(children) > 0) {
      return (
        
      )
    } else {
      return null

renderDialog (props) {
    const {
      onDismiss,
      label,
      shouldCloseOnDocumentClick,
      shouldReturnFocus,
      liveRegion,
      size,
      constrain,
      as
    } = this.props

    const dialog = (

const selected = !(child.props.disabled || child.props.isDisabled) &&
          (child.props.selected || child.props.isSelected || selectedIndex === index)
        const id = uid()

        tabs.push(this.createTab(index, id, selected, child))
        panels.push(this.clonePanel(index, id, selected, child))

        index ++
      } else {
        panels.push(child)
      }
    })

    return (

const {
      id,
      variant,
      selected,
      disabled,
      controls,
      children,
      ...props
    } = this.props

    const isSelected = selected || props.isSelected
    const isDisabled = disabled || props.isDisabled

    return (

const classes = {
      [styles.root]: true,
      [styles['color--link-inverse']]: variant === 'inverse' || color === 'link-inverse',
      [styles[`iconPlacement--${iconPlacement}`]]: renderIcon && this.hasVisibleChildren,
      [styles.truncates]: this.containsTruncateText,
      [styles[`is${isWithinText ? 'Within' : 'Outside'}Text`]]: true
    }

    const isDisabled = interaction === 'disabled' || disabled
    const role = onClick && this.element !== 'button' ? 'button' : null
    const type = (this.element === 'button' || this.element === 'input') ? 'button' : null
    const tabIndex = (role === 'button' && !isDisabled) ? '0' : null

    return (

render () {
    const { children, ...props } = this.props
    const ElementType = getElementType(PresentationContent, this.props)

    return (
      
        {children}
      
    )
  }
}