How to use the @instructure/ui-react-utils/lib/matchComponentTypes function in @instructure/ui-react-utils

React.Children.forEach(this.props.children, (child, index) => {
      if (matchComponentTypes(child, [TabPanel])) {
        const selected = !child.props.disabled && (this.selectedIndex === index)
        const id = ids[index]

        // render screen reader only tabs before the selected tab
        if (selected) {
          for (let i = 0; i < index; i++) {
            children.push(this.createScreenReaderTab(i, ids[i], tabs[i].props))
          }
        }

        children.push(this.createTab(index, id, selected, child.props))

        // render screen reader only tabs after the selected tab
        if (selected) {
          for (let i = index + 1; i < count; i++) {
            children.push(this.createScreenReaderTab(i, ids[i], tabs[i].props))

React.Children.forEach(this.props.children, (child, index) => {
      if (matchComponentTypes(child, [Panel])) {
        const selected = !child.props.disabled && (this.selectedIndex === index)
        const id = ids[index]

        // render screen reader only tabs before the selected tab
        if (selected) {
          for (let i = 0; i < index; i++) {
            children.push(this.createScreenReaderTab(i, ids[i], tabs[i].props))
          }
        }

        children.push(this.createTab(index, id, selected, child.props))

        // render screen reader only tabs after the selected tab
        if (selected) {
          for (let i = index + 1; i < count; i++) {
            children.push(this.createScreenReaderTab(i, ids[i], tabs[i].props))

return React.Children.toArray(this.props.children).map((child) => {
      return matchComponentTypes(child, [Panel]) && child
    })
  }

getHeaders () {
    const { children } = this.props
    const [ head ] = Children.toArray(children)

    if (matchComponentTypes(head, [Head])) {
      const [ row ] = Children.toArray(head.props.children)

      if (matchComponentTypes(row, [Row])) {
        return Children.map(row.props.children, (colHeader) => {
          return matchComponentTypes(colHeader, [ColHeader])
            ? colHeader.props.children
            : null
        })
      }
    }
    return null
  }

        {Children.map(children, (child) => matchComponentTypes(child, [Row])
          ? safeCloneElement(child, {
            key: child.props.name,
            hover,
            isStacked,
            headers,
          })
          : null)}

renderSelect () {
    const { children } = this.props
    const [ row ] = Children.toArray(children)

    if (!matchComponentTypes(row, [Row])) {
      return null
    }
    const options = []
    const clickHandlers = {}
    let selectedOption = null
    let count = 0

    Children.forEach(row.props.children, (colHeader) => {
      count += 1
      if (matchComponentTypes(colHeader, [ColHeader])) {
        const {id, sortDirection, onRequestSort} = colHeader.props

        if (onRequestSort) {
          options.push(id)
          clickHandlers[id] = onRequestSort
          if (sortDirection !== 'none') {

getHeaders () {
    const { children } = this.props
    const [ head ] = Children.toArray(children)

    if (matchComponentTypes(head, [Head])) {
      const [ row ] = Children.toArray(head.props.children)

      if (matchComponentTypes(row, [Row])) {
        return Children.map(row.props.children, (colHeader) => {
          return matchComponentTypes(colHeader, [ColHeader])
            ? colHeader.props.children
            : null
        })
      }
    }
    return null
  }

{Children.map(children, (child) => {
          if (matchComponentTypes(child, [Head])) {
            return safeCloneElement(child, {
              key: child.props.name,
              isStacked,
            })
          }
          if (matchComponentTypes(child, [Body])) {
            return safeCloneElement(child, {
              key: child.props.name,
              isStacked,
              hover,
              headers,
            })
          }
          return null
        })}

{Children.map(children, (child, index) => {
          if (matchComponentTypes(child, [ColHeader])) {
            return child
          }
          if (matchComponentTypes(child, [RowHeader])) {
            return safeCloneElement(child, {
              key: child.props.name,
              isStacked,
            })
          }
          if (matchComponentTypes(child, [Cell])) {
            return safeCloneElement(child, {
              key: child.props.name,
              isStacked,
              header: headers && headers[index],
            })
          }
          return null