theme value is empty object {}

[Codiving]

"react": "18.2.0", "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3"

I'm customizing ThemeContext and ThemeProvider using React useContext.
When using useTheme in @emotion/react, theme value is an empty object {}.
But, When using useThemeState (custom context), theme value is normal.

I don't know why it shouldn't be used in emotion/react.

ThemeContext.tsx
import { ThemeProvider as EmotionThemeProvider, Theme } from "@emotion/react";
import React, { Dispatch, createContext, useContext, useReducer } from "react";

type Action = { type: "SET_LANGUAGE"; lang: string };

type ThemeDispatch = Dispatch<Action>;

const ThemeStateContext = createContext<Theme | null>(null);
const ThemeDispatchContext = createContext<ThemeDispatch | null>(null);

function reducer(state: Theme, action: Action): Theme {
  switch (action.type) {
    case "SET_LANGUAGE":
      return {
        ...state,
        lang: action.lang,
      };
    default:
      throw new Error("Unhandled action");
  }
}

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(reducer, {
    lang: "en",
  });

  return (
    <ThemeStateContext.Provider value={state}>
      <ThemeDispatchContext.Provider value={dispatch}>
        <EmotionThemeProvider theme={state}>{children}</EmotionThemeProvider>
      </ThemeDispatchContext.Provider>
    </ThemeStateContext.Provider>
  );
}

export function useThemeState() {
  const state = useContext(ThemeStateContext);
  if (!state) throw new Error("Cannot find ThemeProvider");
  return state;
}

export function useThemeDispatch() {
  const dispatch = useContext(ThemeDispatchContext);
  if (!dispatch) throw new Error("Cannot find ThemeProvider");
  return dispatch;
}

TestComp.tsx
import { useThemeState } from "@context/ThemeContext";
import "@emotion/react";
import { useTheme } from "@emotion/react";
import styled from "@emotion/styled";

const A = styled("div")(({ theme }) => {
  // empty object
  console.log("# theme : ", theme);
  return {};
});

const TestComp = () => {
  const a = useThemeState(); // normal value 
  const b = useTheme(); // empty object
  return <A>test</A>;
};

export default TestComp;