How to use the @vue/reactivity.toRaw function in @vue/reactivity

function setRef(
    ref: string | Function | Ref,
    oldRef: string | Function | Ref | null,
    parent: ComponentInternalInstance,
    value: HostNode | ComponentPublicInstance | null
  ) {
    const refs = parent.refs === EMPTY_OBJ ? (parent.refs = {}) : parent.refs
    const renderContext = toRaw(parent.renderContext)

    // unset old ref
    if (oldRef !== null && oldRef !== ref) {
      if (isString(oldRef)) {
        refs[oldRef] = null
        const oldSetupRef = renderContext[oldRef]
        if (isRef(oldSetupRef)) {
          oldSetupRef.value = null
        }
      } else if (isRef(oldRef)) {
        oldRef.value = null
      }
    }

    if (isString(ref)) {
      const setupRef = renderContext[ref]

const children = slots.default && slots.default()
      if (!children || !children.length) {
        return
      }

      // warn multiple elements
      if (__DEV__ && children.length > 1) {
        warn(
          ' can only be used on a single element or component. Use ' +
            ' for lists.'
        )
      }

      // there's no need to track reactivity for these props so use the raw
      // props for a bit better perf
      const rawProps = toRaw(props)
      const { mode } = rawProps
      // check mode
      if (__DEV__ && mode && !['in-out', 'out-in', 'default'].includes(mode)) {
        warn(`invalid  mode: ${mode}`)
      }

      // at this point children has a guaranteed length of 1.
      const child = children[0]
      if (state.isLeaving) {
        return emptyPlaceholder(child)
      }

      // in the case of , we need to
      // compare the type of the kept-alive children.
      const innerChild = getKeepAliveChild(child)
      if (!innerChild) {

setProp(key, true)
        }
      }
    }
    // validation
    if (__DEV__ && rawProps) {
      for (const key in options) {
        let opt = options[key]
        if (opt == null) continue
        let rawValue
        if (!(key in rawProps) && hyphenate(key) in rawProps) {
          rawValue = rawProps[hyphenate(key)]
        } else {
          rawValue = rawProps[key]
        }
        validateProp(key, toRaw(rawValue), opt, !hasOwn(props, key))
      }
    }
  } else {
    // if component has no declared props, $attrs === $props
    attrs = props
  }

  // in case of dynamic props, check if we need to delete keys from
  // the props proxy
  const { patchFlag } = instance.vnode
  if (
    propsProxy !== null &&
    (patchFlag === 0 || patchFlag & PatchFlags.FULL_PROPS)
  ) {
    const rawInitialProps = toRaw(propsProxy)
    for (const key in rawInitialProps) {

function formatProp(key: string, value: unknown, raw?: boolean): any {
  if (isString(value)) {
    value = JSON.stringify(value)
    return raw ? value : [`${key}=${value}`]
  } else if (
    typeof value === 'number' ||
    typeof value === 'boolean' ||
    value == null
  ) {
    return raw ? value : [`${key}=${value}`]
  } else if (isRef(value)) {
    value = formatProp(key, toRaw(value.value), true)
    return raw ? value : [`${key}=Ref<`, value, `>`]
  } else if (isFunction(value)) {
    return [`${key}=fn${value.name ? `<${value.name}>` : ``}`]
  } else {
    value = toRaw(value)
    return raw ? value : [`${key}=`, value]
  }
}

if (isString(value)) {
    value = JSON.stringify(value)
    return raw ? value : [`${key}=${value}`]
  } else if (
    typeof value === 'number' ||
    typeof value === 'boolean' ||
    value == null
  ) {
    return raw ? value : [`${key}=${value}`]
  } else if (isRef(value)) {
    value = formatProp(key, toRaw(value.value), true)
    return raw ? value : [`${key}=Ref<`, value, `>`]
  } else if (isFunction(value)) {
    return [`${key}=fn${value.name ? `<${value.name}>` : ``}`]
  } else {
    value = toRaw(value)
    return raw ? value : [`${key}=`, value]
  }
}