How to use the @fluentui/react-proptypes.collectionShorthandWithKindProp function in @fluentui/react-proptypes

*/
  getOverflowItems?: (
    startIndex: number,
  ) => ShorthandCollection // FIXME: use correct kind
}

class Toolbar extends UIComponent> {
  static create: ShorthandFactory

  static className = 'ui-toolbar'

  static displayName = 'Toolbar'

  static propTypes = {
    ...commonPropTypes.createCommon(),
    items: customPropTypes.collectionShorthandWithKindProp([
      'divider',
      'item',
      'group',
      'toggle',
      'custom',
    ]),
    overflow: PropTypes.bool,
    overflowOpen: PropTypes.bool,
    overflowItem: customPropTypes.shorthandAllowingChildren,
    onOverflow: PropTypes.func,
    onOverflowOpenChange: PropTypes.func,
    getOverflowItems: PropTypes.func,
  }

  static defaultProps = {
    accessibility: toolbarBehavior,

/** Shorthand array of props for ToolbarRadioGroup. */
  items?: ShorthandCollection
}

class ToolbarRadioGroup extends UIComponent> {
  static displayName = 'ToolbarRadioGroup'

  static className = 'ui-toolbars' // FIXME: required by getComponentInfo/isConformant. But this is group inside a toolbar not a group of toolbars

  static create: ShorthandFactory

  static propTypes = {
    ...commonPropTypes.createCommon(),
    activeIndex: PropTypes.number,
    items: customPropTypes.collectionShorthandWithKindProp(['divider', 'item']),
  }

  static defaultProps = {
    accessibility: toolbarRadioGroupBehavior as Accessibility,
  }

  itemRefs: React.RefObject[] = []

  actionHandlers = {
    nextItem: event => this.setFocusedItem(event, 1),
    prevItem: event => this.setFocusedItem(event, -1),
  }

  setFocusedItem = (event, direction) => {
    const { items } = this.props

static slotClassNames: MenuSlotClassNames = {
    divider: `${Menu.className}__divider`,
    item: `${Menu.className}__item`,
  }

  static create: ShorthandFactory

  static propTypes = {
    ...commonPropTypes.createCommon({
      content: false,
    }),
    activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    fluid: PropTypes.bool,
    iconOnly: PropTypes.bool,
    items: customPropTypes.collectionShorthandWithKindProp(['divider', 'item']),
    onItemClick: PropTypes.func,
    pills: PropTypes.bool,
    pointing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['start', 'end'])]),
    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
    underlined: PropTypes.bool,
    vertical: PropTypes.bool,
    submenu: PropTypes.bool,
    indicator: customPropTypes.itemShorthandWithoutJSX,
  }

  static defaultProps = {
    as: 'ul',
    accessibility: menuBehavior as Accessibility,
  }

submenu?: boolean

  /** Shorthand for the submenu indicator. */
  submenuIndicator?: ShorthandValue
}

class ToolbarMenu extends UIComponent {
  static displayName = 'ToolbarMenu'

  static className = 'ui-toolbar__menu'

  static create: ShorthandFactory

  static propTypes = {
    ...commonPropTypes.createCommon(),
    items: customPropTypes.collectionShorthandWithKindProp(['divider', 'item']),
    onItemClick: PropTypes.func,
    submenu: PropTypes.bool,
    submenuIndicator: customPropTypes.itemShorthandWithoutJSX,
  }

  static defaultProps = {
    accessibility: toolbarMenuBehavior,
    as: 'ul',
  }

  actionHandlers = {
    performClick: e => {
      _.invoke(this.props, 'onClick', e, this.props)
    },
  }