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

function mergeWithDefaultThemeVariables (themeKey, overrides) {
  let variables

  if (themeKey) {
    variables = getVariablesWithOverrides(themeKey, overrides)
  } else { // fall back to defaults, but still apply overrides
    const defaultOverrides = getRegistry().overrides
    const defaultOverridesIsEmpty = isEmpty(defaultOverrides)
    if (!defaultOverridesIsEmpty && !isEmpty(overrides)) {
      variables = mergeDeep(defaultOverrides, overrides)
    } else if (defaultOverridesIsEmpty) {
      variables = overrides
    } else {
      variables = defaultOverrides
    }
  }

  return getVariablesWithOverrides(getDefaultThemeKey(), variables)
}

function getVariablesWithOverrides (themeKey, overrides) {
  const theme = getRegisteredTheme(themeKey)
  const variables = theme.variables || {}
  const overridesIsEmpty = isEmpty(overrides)

  if (!overridesIsEmpty && theme.immutable) {
    warn(
      false,
      `[themeable] Theme, '${theme.key}', is immutable. Cannot apply overrides: ${JSON.stringify(overrides)}`
    )
    return variables
  }

  const variablesIsEmpty = isEmpty(variables)
  if (!variablesIsEmpty && !overridesIsEmpty) return mergeDeep(variables, overrides)
  if (variablesIsEmpty) return overrides || {}
  return variables
}

getChildContext () {
    let theme = this.props.theme || {}

    const parentThemeContext = ThemeContext.getThemeContext(this.context) || {}

    if (parentThemeContext.immutable && parentThemeContext.theme) {
      warn(
        !this.props.theme,
        '[ApplyTheme] Parent theme is immutable. Cannot apply theme: %O',
        this.props.theme
      )
      theme = parentThemeContext.theme
    } else if (parentThemeContext.theme) {
      theme = mergeDeep(parentThemeContext.theme, theme)
    }

    return ThemeContext.makeThemeContext(theme, parentThemeContext.immutable || this.props.immutable)
  }