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

}
                

                  {/*
                    The input and content after input should not wrap, so they're in their own
                    Flex container
                  */}
                  
                    
                      {this.renderInput()}
                    
                    {(renderAfterInput || icon) &&
                      
                        {renderAfterInput ?
                          callRenderProp(renderAfterInput) :
                          callRenderProp(icon)
                        }
                      
                    }
                  

                
              

              /* If no prepended or appended content, don't render Flex layout */
              : this.renderInput()
          }
        
      
    )
  }

const nextButton = callRenderProp(renderNextMonthButton)
    const prevButton = callRenderProp(renderPrevMonthButton)

    const cloneButton = (button, onClick) => safeCloneElement(button, {
      onClick: createChainedFunction(button.props.onClick, onClick)
    })

    const classes = classnames({
      [styles.navigation]: true,
      [styles.withNavigationButtons]: prevButton || nextButton
    })

    return (
      <div>
        {prevButton &amp;&amp; cloneButton(prevButton, onRequestRenderPrevMonth)}
        {callRenderProp(renderNavigationLabel)}
        {nextButton &amp;&amp; cloneButton(nextButton, onRequestRenderNextMonth)}
      </div>
    )
  }

renderContent () {
    let content = ComponentIdentifier.pick(Popover.Content, this.props.children)
    if (!content) {
      content = callRenderProp(this.props.children)
    }

    if (this.shown) {
      content = (
        <dialog label="{this.props.screenReaderLabel" open="{this.shown}"> this._dialog = el}
          display="block"
          onBlur={this.handleDialogBlur}
          onDismiss={this.handleDialogDismiss}
          liveRegion={this.props.liveRegion}
          defaultFocusElement={this.props.defaultFocusElement}
          shouldContainFocus={this.props.shouldContainFocus}
          shouldReturnFocus={this.props.shouldReturnFocus}
          shouldFocusOnOpen={!this.props.shouldFocusContentOnTriggerBlur}</dialog>

renderHeader () {
    const {
      renderNextMonthButton,
      renderPrevMonthButton,
      renderNavigationLabel,
      onRequestRenderNextMonth,
      onRequestRenderPrevMonth
    } = this.props

    const nextButton = callRenderProp(renderNextMonthButton)
    const prevButton = callRenderProp(renderPrevMonthButton)

    const cloneButton = (button, onClick) => safeCloneElement(button, {
      onClick: createChainedFunction(button.props.onClick, onClick)
    })

    const classes = classnames({
      [styles.navigation]: true,
      [styles.withNavigationButtons]: prevButton || nextButton
    })

    return (
      <div>
        {prevButton &amp;&amp; cloneButton(prevButton, onRequestRenderPrevMonth)}
        {callRenderProp(renderNavigationLabel)}
        {nextButton &amp;&amp; cloneButton(nextButton, onRequestRenderNextMonth)}
      </div>

borderColor="transparent"
        background="transparent"
        cursor={elementType === 'button' || elementType === 'a'
          ? (isDisabled ? 'not-allowed' : 'pointer')
          : 'auto'
        }
        disabled={isDisabled}
        aria-current={isToday ? 'date' : null}
        aria-selected={this.shouldApplyAriaSelected() ? (isSelected ? 'true' : 'false') : null}
        onClick={onClick && this.handleClick}
        onKeyDown={onKeyDown && this.handleKeyDown}
        elementRef={this.handleElementRef}
      >
        <span>
          
            {callRenderProp(children)}
          
        </span>
      
    )
  }
}

interaction,
      inline,
      display,
      placeholder,
      required,
      isRequired,
      showArrows,
      size,
      value,
      width
    } = this.props

    return (
      
        <span width="" style="{width">
          </span>

const nextButton = callRenderProp(renderNextMonthButton)
    const prevButton = callRenderProp(renderPrevMonthButton)

    const cloneButton = (button, onClick) => safeCloneElement(button, {
      onClick: createChainedFunction(button.props.onClick, onClick)
    })

    const classes = classnames({
      [styles.navigation]: true,
      [styles.withNavigationButtons]: prevButton || nextButton
    })

    return (
      <div>
        {prevButton &amp;&amp; cloneButton(prevButton, onRequestRenderPrevMonth)}
        {callRenderProp(renderNavigationLabel)}
        {nextButton &amp;&amp; cloneButton(nextButton, onRequestRenderNextMonth)}
      </div>
    )
  }

renderCloseButton () {
    const closeButtonLabel = (this.props.renderCloseButtonLabel
      && callRenderProp(this.props.renderCloseButtonLabel))
      || this.props.closeButtonLabel

    return closeButtonLabel
      ? <div>
        
          {closeButtonLabel}
        
      </div>
      : null
  }

render () {
    const ElementType = getElementType(Item, this.props)

    const {
      renderIcon,
      renderLabel,
      href,
      isSelected,
      elementRef,
      renderAfter,
      cursor,
      isDisabled
    } = this.props

    const icon = callRenderProp(renderIcon)
    const label = callRenderProp(renderLabel)

    const labelIsForScreenReaders = matchComponentTypes(
      label, [ScreenReaderContent]
    )

    if (icon) {
      error(
        labelIsForScreenReaders,
        '[AppNav] If an icon is used, the label text should be wrapped in .'
      )
    }

    const classes = classnames ({
      [styles.root]: true,
      [styles.isSelected]: isSelected,
      [styles.disabled]: isDisabled