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

{isShowingOptions ? Children.map(children, (child, index) => {
            if (!child || !matchComponentTypes(child, [Group, Option])) {
              return // ignore invalid children
            }
            if (matchComponentTypes(child, [Option])) {
              lastWasGroup = false
              return this.renderOption(child, {
                getOptionProps,
                getDisabledOptionProps
              })
            }
            if (matchComponentTypes(child, [Group])) {
              const afterGroup = lastWasGroup ? true : false
              lastWasGroup = true
              return this.renderGroup(child, {
                getOptionProps,
                getDisabledOptionProps,
                // for rendering separators appropriately

return Children.map(children, (child) => {
      if (!matchComponentTypes(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
        return
      }

      count += 1

      const isTabbable = !this.state.hasFocus && count === 1

      if (matchComponentTypes(child, ['MenuItemSeparator'])) {
        return <li role="none">{child}</li>
      }

      const controls = (
        child.props['aria-controls'] ||
        child.props.controls ||
        this.props['aria-controls'] || // eslint-disable-line react/prop-types
        this.props.controls // eslint-disable-line react/prop-types

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)}

React.Children.forEach(this.props.children, (child) => {
      if (child && matchComponentTypes(child, [CloseButton])) {
        usesCloseButton = true
      }
    })

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

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

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

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

      .filter(child => matchComponentTypes(child, [Panel]))
      .findIndex(child => (child.props.selected || child.props.isSelected) && !(child.props.disabled || child.props.isDisabled))

          {Children.map(children, (child) => matchComponentTypes(child, [Row])
            ? child
            : null)}

React.Children.forEach(this.props.children, (child) => {
      if (child && matchComponentTypes(child, ['TruncateText'])) {
        truncateText = true
      }
    })