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

static displayName = 'Input'

  static slotClassNames: InputSlotClassNames

  static propTypes = {
    ...commonPropTypes.createCommon({
      content: false,
    }),
    clearable: PropTypes.bool,
    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    fluid: PropTypes.bool,
    icon: customPropTypes.itemShorthandWithoutJSX,
    iconPosition: PropTypes.oneOf(['start', 'end']),
    input: customPropTypes.itemShorthand,
    inputRef: customPropTypes.ref,
    inline: PropTypes.bool,
    inverted: PropTypes.bool,
    onChange: PropTypes.func,
    type: PropTypes.string,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    wrapper: customPropTypes.wrapperShorthand,
  }

  static defaultProps = {
    accessibility: inputBehavior,
    type: 'text',
    wrapper: {},
    iconPosition: 'end',
  }

  static autoControlledProps = ['value']

localAlias: PropTypes.string,
            unicodeRange: PropTypes.string,
          }),
        }),
      ),
      staticStyles: PropTypes.arrayOf(
        PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
      ),
      animations: PropTypes.object,
    }),
    renderer: PropTypes.object,
    rtl: PropTypes.bool,
    disableAnimations: PropTypes.bool,
    children: PropTypes.node.isRequired,
    target: PropTypes.object,
    telemetryRef: customPropTypes.ref,
  }

  static defaultProps = {
    theme: {},
  }

  static Consumer = ProviderConsumer
  static Box = ProviderBox
  static contextType = ThemeContext

  outgoingContext: ProviderContextPrepared
  staticStylesRendered: boolean = false

  telemetry: Telemetry

  renderStaticStyles = (renderer: Renderer, mergedTheme: ThemePrepared) => {

on: PropTypes.oneOfType([
      PropTypes.oneOf(['hover', 'click', 'focus', 'context']),
      PropTypes.arrayOf(PropTypes.oneOf(['click', 'focus', 'context'])),
      PropTypes.arrayOf(PropTypes.oneOf(['hover', 'focus', 'context'])),
    ]),
    open: PropTypes.bool,
    onOpenChange: PropTypes.func,
    pointing: PropTypes.bool,
    position: PropTypes.oneOf(POSITIONS),
    renderContent: PropTypes.func,
    target: PropTypes.any,
    trigger: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.any]),
    tabbableTrigger: PropTypes.bool,
    unstable_pinned: PropTypes.bool,
    content: customPropTypes.shorthandAllowingChildren,
    contentRef: customPropTypes.ref,
    trapFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
    autoFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
  }

  static defaultProps: PopupProps = {
    accessibility: popupBehavior,
    align: 'start',
    position: 'above',
    on: 'click',
    mouseLeaveDelay: 500,
    tabbableTrigger: true,
  }

  static autoControlledProps = ['open']

  pointerTargetRef = React.createRef()

class Slider extends AutoControlledComponent, SliderState> {
  inputRef = React.createRef()

  static displayName = 'Slider'

  static className = 'ui-slider'

  static slotClassNames: SliderSlotClassNames

  static propTypes = {
    ...commonPropTypes.createCommon({ content: false }),
    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    fluid: PropTypes.bool,
    getA11yValueMessageOnChange: PropTypes.func,
    input: customPropTypes.itemShorthand,
    inputRef: customPropTypes.ref,
    max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    onChange: PropTypes.func,
    step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    vertical: PropTypes.bool,
  }

  static defaultProps: SliderProps = {
    accessibility: sliderBehavior,
    getA11yValueMessageOnChange: ({ value }) => String(value),
    max: 100,
    min: 0,
    step: 1,
  }

/** A ref to a pointer element. */
  pointerRef?: React.Ref
}

class TooltipContent extends UIComponent> {
  static create: ShorthandFactory

  static displayName = 'TooltipContent'
  static className = 'ui-tooltip__content'

  static propTypes = {
    ...commonPropTypes.createCommon(),
    placement: PropTypes.string,
    pointing: PropTypes.bool,
    pointerRef: customPropTypes.ref,
  }

  renderComponent({
    accessibility,
    ElementType,
    classes,
    unhandledProps,
    styles,
  }: RenderResultConfig): React.ReactNode {
    const { children, content, open, pointing, pointerRef } = this.props

    return (

}

class PopupContent extends UIComponent> {
  static create: ShorthandFactory

  static displayName = 'PopupContent'
  static className = 'ui-popup__content'
  static slotClassNames: PopupContentSlotClassNames

  static propTypes = {
    ...commonPropTypes.createCommon(),
    placement: PropTypes.string,
    pointing: PropTypes.bool,
    onMouseEnter: PropTypes.func,
    onMouseLeave: PropTypes.func,
    pointerRef: customPropTypes.ref,
    trapFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
    autoFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
  }

  handleMouseEnter = e => {
    _.invoke(this.props, 'onMouseEnter', e, this.props)
  }

  handleMouseLeave = e => {
    _.invoke(this.props, 'onMouseLeave', e, this.props)
  }

  renderComponent({
    accessibility,
    ElementType,
    classes,

}

class AccordionTitle extends UIComponent, any> {
  static displayName = 'AccordionTitle'

  static create: ShorthandFactory

  static className = 'ui-accordion__title'

  static slotClassNames: AccordionTitleSlotClassNames

  static propTypes = {
    ...commonPropTypes.createCommon(),
    accordionContentId: PropTypes.string,
    active: PropTypes.bool,
    contentRef: customPropTypes.ref,
    canBeCollapsed: PropTypes.bool,
    index: PropTypes.number,
    onClick: PropTypes.func,
    indicator: customPropTypes.itemShorthand,
  }

  static defaultProps = {
    accessibility: accordionTitleBehavior,
    as: 'dt',
    contentRef: _.noop,
  }

  actionHandlers = {
    performClick: e => {
      e.preventDefault()
      this.handleClick(e)