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

renderChildren (truncated, data, width) {
    if (!truncated) {
      return this._text
    }

    let childElements = []
    // iterate over each node used in the truncated string
    for (let i = 0; i < data.length; i++) {
      const item = data[i]
      const element = this._text.props.children[i]
      const nodeText = item.join('')

      if (element && element.props) {
        // if node is an html element and not just a string
        childElements.push(safeCloneElement(element, element.props, nodeText))
      } else {
        childElements.push(nodeText)
      }
    }
    // this spacer element is set to the max width the full text could potentially be
    // without this, text in `width: auto` elements won't expand to accomodate more text, once truncated
    childElements.push(<span width="" style="{{width:">)

    const children = React.Children.map(childElements, child =&gt; child)
    return (
      this._text.props
        ? safeCloneElement(this._text, this._text.props, children)
        : children
    )
  }
</span>

renderMonthNavigationButton (type = 'prev') {
    const { renderPrevMonthButton, renderNextMonthButton } = this.props
    const button = type === 'prev' ? renderPrevMonthButton : renderNextMonthButton
    return button && safeCloneElement(callRenderProp(button), { tabIndex: -1 })
  }

renderTarget () {
    let target = ComponentIdentifier.pick(Position.Target, this.props.children)
    if (!target) {
      target = callRenderProp(this.props.renderTarget)
    }

    if (target) {
      return safeCloneElement(target, {
        ref: el => { this._target = el },
        [Position.targetLocatorAttribute]: this._id
      })
    } else if (this.props.target) {
      this._target = callRenderProp(this.props.target)
    } else {
      return null
    }
  }

{row.map((day, i) => (
            
              {role === 'presentation'
                ? safeCloneElement(day, { 'aria-describedby': this._weekdayHeaderIds[i] })
                : day
              }
            
          ))}

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

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

get activePage () {
    const { activePageIndex, children } = this.props
    const pages = React.Children.toArray(children)
    const activePage = (activePageIndex < pages.length) ? pages[activePageIndex] : null

    error(activePage, '[Pages] Invalid `activePageIndex`.')

    return activePage ? safeCloneElement(activePage, {
      ref: (el) => { this._activePage = el }
    }) : null
  }

clonePanel (index, generatedId, selected, panel) {
    const id = panel.props.id || generatedId

    return safeCloneElement(panel, {
      id: panel.props.id || `panel-${id}`,
      labelledBy: `tab-${id}`,
      selected: undefined,
      isSelected: selected,
      key: panel.props.id || `panel-${id}`,
      variant: this.props.variant,
      padding: panel.props.padding || this.props.padding,
      textAlign: panel.props.textAlign || this.props.textAlign,
      maxHeight: panel.maxHeight || this.props.maxHeight,
      minHeight: panel.minHeight || this.props.minHeight
    })
  }

clonePanel (index, cachedId, selected, panel) {
    const id = panel.props.id || cachedId
    return safeCloneElement(panel, {
      ref: (c) => {
        this._panels[index] = c
      },
      id: `panel-${id}`,
      labelledBy: `tab-${id}`,
      selected,
      key: `panel-${id}`,
      variant: this.props.variant,
      padding: panel.props.padding || this.props.padding,
      textAlign: panel.props.textAlign || this.props.textAlign,
      maxHeight: panel.maxHeight || this.props.maxHeight,
      minHeight: panel.minHeight || this.props.minHeight
    })
  }