How to use the @emotion/core.ThemeContext.Provider function in @emotion/core

const BaseProvider = ({ context, components, children }) => {
  const theme = { ...context.theme }
  if (theme.useCustomProperties !== false) {
    theme.colors = toCustomProperties(theme.colors, 'colors')
  }
  return jsx(
    EmotionContext.Provider,
    { value: theme },
    jsx(
      MDXProvider,
      { components },
      jsx(Context.Provider, { value: context, children })
    )
  )
}

...theme,
    colors: merge({}, theme.colors, get(theme, `colors.modes.${context.colorMode}`))
  }

  useEffect(() => {
    window.__THEME_UI = window.__THEME_UI || context
  }, [])

  useLayoutEffect(() => {
    const stored = storage.get()
    document.body.classList.remove('theme-ui-' + stored)
    if (!stored) return
    setColorMode(stored)
  }, [])

  return jsx(Emotion.Provider, { value: context.theme },
    jsx(MDXProvider, { components: context.components },
      jsx(Context.Provider, { value: context },
        jsx(ColorMode, { key: 'color-mode' }),
        props.children
      )
    )
  )
}

const [colorMode, setColorMode] = useColorModeState(outer.theme)
  const theme = applyColorMode(outer.theme || {}, colorMode)

  if (theme.useCustomProperties !== false) {
    theme.rawColors = {...theme.colors}
    theme.colors = toCustomProperties(theme.colors, 'colors')
  }

  const context = {
    ...outer,
    theme,
    colorMode,
    setColorMode,
  }

  return jsx(EmotionContext.Provider, { value: theme },
    jsx(Context.Provider, { value: context },
      jsx(BodyStyles, { key: 'color-mode' }),
      children
    )
  )
}

const BaseProvider = ({ context, children }) =>
  jsx(
    EmotionContext.Provider, { value: context.theme },
    jsx(Context.Provider, {
      value: context,
      children
    })
  )