How to use the @emotion/utils.insertStyles function in @emotion/utils

let mergedProps = pickAssign(testAlwaysTrue, {}, props, {
        theme: props.theme || context.theme
      })
      if (typeof props.className === 'string') {
        className += getRegisteredStyles(
          context.registered,
          classInterpolations,
          props.className
        )
      }
      const serialized = serializeStyles.call(
        mergedProps,
        context.registered,
        styles.concat(classInterpolations)
      )
      const rules = insertStyles(context, serialized)
      className += `${context.key}-${serialized.name}`
      if (targetClassName !== undefined) {
        className += ` ${targetClassName}`
      }

      const ele = React.createElement(
        baseTag,
        // $FlowFixMe
        pickAssign(shouldForwardProp, {}, props, {
          className,
          ref: props.innerRef
        })
      )
      if (shouldSerializeToReactTree && rules !== undefined) {
        return (

insertStyles() {
    if (this.props.serialized.next !== undefined) {
      // insert keyframes
      insertStyles(this.props.cache, this.props.serialized.next, true)
    }
    let rules = this.props.cache.stylis(``, this.props.serialized.styles)
    if (this.sheet.tags.length) {
      // if this doesn't exist then it will be null so the style element will be appended
      this.sheet.before = this.sheet.tags[0].nextElementSibling
      this.sheet.flush()
    }

    rules.forEach(this.sheet.insert, this.sheet)
  }

const Style = withCSSContext((props: Props, context: CSSContextType) => {
  let rules = ''
  let hash = ''
  if (Array.isArray(props.styles)) {
    props.styles.forEach(style => {
      let renderedStyle = insertStyles(context, style)
      if (renderedStyle !== undefined) {
        // $FlowFixMe
        rules += renderedStyle
        hash += ` ${style.name}`
      }
    })
  } else {
    let renderedStyle = insertStyles(context, props.styles)
    if (renderedStyle !== undefined) {
      rules = renderedStyle
      // $FlowFixMe
      hash += ` ${props.styles.name}`
    }
  }
  if (shouldSerializeToReactTree && rules !== '') {
    return (
      <style>
    )
  }</style>

insertStyles() {
    if (this.props.serialized.next !== undefined) {
      // insert keyframes
      insertStyles(this.props.cache, this.props.serialized.next, true)
    }
    if (this.sheet.tags.length) {
      // if this doesn't exist then it will be null so the style element will be appended
      let element = this.sheet.tags[this.sheet.tags.length - 1]
        .nextElementSibling
      this.sheet.before = ((element: any): Element | null)
      this.sheet.flush()
    }
    this.props.cache.insert(``, this.props.serialized, this.sheet, false)
  }

props.styles.forEach(style => {
      let renderedStyle = insertStyles(context, style)
      if (renderedStyle !== undefined) {
        // $FlowFixMe
        rules += renderedStyle
        hash += ` ${style.name}`
      }
    })
  } else {

if (data.class) {
          className += getRegisteredStyles(
            cache.registered,
            classInterpolations,
            clsx(data.class)
          )
        }

        const serialized = serializeStyles(
          styles.concat(classInterpolations),
          cache.registered,
          mergedProps
        )

        insertStyles(
          cache,
          serialized,
          typeof finalTag === 'string'
        )

        className += `${cache.key}-${serialized.name}`
        if (targetClassName !== undefined) {
          className += ` ${targetClassName}`
        }

        return h(
          finalTag,
          {
            ...data,
            attrs: options.getAttrs ? options.getAttrs(restAttrs) : restAttrs,
            staticClass: undefined,

let css = (...args: Array) => {
          if (hasRendered && process.env.NODE_ENV !== 'production') {
            throw new Error('css can only be used during render')
          }
          let serialized = serializeStyles(args, context.registered)
          if (isBrowser) {
            insertStyles(context, serialized, false)
          } else {
            let res = insertStyles(context, serialized, false)
            if (res !== undefined) {
              rules += res
            }
          }
          if (!isBrowser) {
            serializedHashes += ` ${serialized.name}`
          }
          return `${context.key}-${serialized.name}`
        }
        let cx = (...args: Array) => {

if (typeof props.className === 'string') {
                className = getRegisteredStyles(
                  context.registered,
                  classInterpolations,
                  props.className
                )
              } else if (props.className != null) {
                className = `${props.className} `
              }

              const serialized = serializeStyles(
                styles.concat(classInterpolations),
                context.registered,
                mergedProps
              )
              const rules = insertStyles(
                context,
                serialized,
                typeof finalTag === 'string'
              )
              className += `${context.key}-${serialized.name}`
              if (targetClassName !== undefined) {
                className += ` ${targetClassName}`
              }

              const finalShouldForwardProp =
                shouldUseAs && shouldForwardProp === undefined
                  ? getDefaultShouldForwardProp(finalTag)
                  : defaultShouldForwardProp

              let newProps = {}

let css = function(...args) {
    let serialized = serializeStyles(
      args,
      cache.registered,
      this !== undefined ? this.mergedProps : undefined
    )
    insertStyles(cache, serialized, false)
    return `${cache.key}-${serialized.name}`
  }

let serialized = serializeStyles(registeredStyles)

  if (
    process.env.NODE_ENV !== 'production' &&
    serialized.name.indexOf('-') === -1
  ) {
    let labelFromStack = props[labelPropName]
    if (labelFromStack) {
      serialized = serializeStyles([
        serialized,
        'label:' + labelFromStack + ';'
      ])
    }
  }
  const rules = insertStyles(cache, serialized, typeof type === 'string')
  className += `${cache.key}-${serialized.name}`

  const newProps = {}
  for (let key in props) {
    if (
      hasOwnProperty.call(props, key) &&
      key !== 'css' &&
      key !== typePropName &&
      (process.env.NODE_ENV === 'production' || key !== labelPropName)
    ) {
      newProps[key] = props[key]
    }
  }
  newProps.ref = ref
  newProps.className = className