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

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

clonePanel (index, id, selected, panel) {
    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
    })
  }

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

clonePanel (index, id, selected, panel) {
    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
    })
  }

{Children.map(children, (child, index) => {
          if (matchComponentTypes(child, [ColHeader])) {
            return child
          }
          if (matchComponentTypes(child, [RowHeader])) {
            return safeCloneElement(child, {
              key: child.props.name,
              isStacked,
            })
          }
          if (matchComponentTypes(child, [Cell])) {
            return safeCloneElement(child, {
              key: child.props.name,
              isStacked,
              header: headers && headers[index],
            })
          }
          return null
        })}