Chakra UI custom theme is not applied when using gatsby's head API

Question

Root Component

import { ChakraBaseProvider } from '@chakra-ui/react';
import theme from 'components/chakra/theme';

function Root({ children }: { children: React.ReactNode }) {
  return <ChakraBaseProvider theme={theme}>{children}</ChakraBaseProvider>;
}

export default Root;

This is the root component

theme

import { extendTheme } from '@chakra-ui/react';
const theme = extendTheme({
  styles: {
    global: {
      body: {
        fontFamily: 'Pretendard',
      },
    },
  },
  breakpoints: {
    sm: '320px', // 320px ~ 768px
    md: '768px', // 768px ~ 960px
    lg: '960px', // 960px ~
    xl: '1180px',
  },
  colors: {
    gray: {
      800: '#121212',
    },
  },
});

export default theme;

This is the Custom theme

[gatsby.browswer]

import { WrapPageElementBrowserArgs } from 'gatsby';
import React from 'react';
import Root from './src/components/layout/Root';
import './src/global.css';

export const wrapPageElement = ({ element, props }: WrapPageElementBrowserArgs) => {
  return <Root>{element}</Root>;
};

gatsby.ssr

import { WrapPageElementBrowserArgs } from 'gatsby';
import React from 'react';
import Root from './src/components/layout/Root';

export const wrapPageElement = ({ element }: WrapPageElementBrowserArgs) => {
  return <Root>{element}</Root>;
};

using wrapPageElement in the gatsby.browser, gatsby.ssr files to wrap them as root components

If you don't apply the Head API, the theme I set up will be applied normally However, if you apply the Head API, the default theme will be applied.

When I enter a page using the head API, it seems to overwrite my theme with additional styles in the head tag.

add) I found an additional workaround Putting the body in the cssVarsRoot property of the ChakraProvider works.

What's the problem?