React Theme Switching Not Updating Components

I’m encountering an issue with theme switching in my React application. The application supports two themes, which I’ll refer to as Theme One and Theme Two. I’ve implemented lazy loading to dynamically load the corresponding theme components based on the selected theme.

Each theme defines its own styling for a common button class. For example, in Theme One, the button has a blue color, while in Theme Two, it has a brown color.

The problem arises when I switch themes using a button. Initially, when transitioning from Theme One to Theme Two, the button color updates correctly from brown to blue. However, after switching back to Theme One, the button color fails to revert to brown as expected. Subsequent theme switches also don’t reflect any changes in the button color.

code: https://codesandbox.io/p/devbox/wizardly-robinson-v774zf?file=%2Fsrc%2FDashboard.tsx%3A1%2C1-17%2C1

// App.js
import React, { createContext, useState, startTransition, useEffect } from "react";
// Lazy load themes
const ThemeOne = React.lazy(() => import("./themes/theme-one"));
const ThemeTwo = React.lazy(() => import("./themes/theme-two"));

export const MawbThemeContext = createContext({ _theme: "" });

const App = () => {
  const [_theme, setTheme] = useState("themeOne");

  const handleChangeTheme = () => {
    startTransition(() => {
      if (_theme === "themeOne") {
        setTheme("themeTwo");
      } else {
        setTheme("themeOne");
      }
    });
  };

  let themeComponent;
  if (_theme === "themeOne") {
    themeComponent = <ThemeOne handleChangeTheme={handleChangeTheme} />;
  } else if (_theme === "themeTwo") {
    themeComponent = <ThemeTwo handleChangeTheme={handleChangeTheme} />;
  } else {
    themeComponent = <ThemeTwo handleChangeTheme={handleChangeTheme} />;
  }

  useEffect(() => {
    startTransition(() => {
      console.log("transition", _theme); // Ensure theme is changing correctly
    });
  }, [_theme]);

  return (
    <>
      <MawbThemeContext.Provider value={{ _theme }}>
        {themeComponent}
      </MawbThemeContext.Provider>
    </>
  );
};

export default App;

I would appreciate any insights into why the theme updates are not being reflected correctly, especially when transitioning between themes multiple times.