Тема React Material UI действительно меняется при смене шрифта со светлого на темный

Question

Итак, я пытаюсь добавить режим темной темы с помощью пользовательского интерфейса материала. У меня есть следующие настройки, на данный момент, если я вручную переключаюсь со светлого на темный, тогда мой относительный пользовательский интерфейс делает go темный, проблема в том, что я пытаюсь сделать это с помощью переключателя. Поэтому, когда я нажимаю переключатель, я вижу в консоли, что он обновляет состояние, а затем тему от светлого до темного, но ничего не меняется, он просто остается светлым, как есть> <</p>

const mainTheme = createMuiTheme({
  palette:{
    primary:{
        light: '#757ce8',
        main: '#e91e63',
        dark: '#002884',
        contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#ff12f3',
      dark: '#ba000d',
      contrastText: '#000',
      white:'#ffffff'
    },
    type:'light'

  }
}); 


  useDarkMode = () => {
    const {
      palette: { type },
    } = this.state.theme;
    console.log("TYPE:" + type);

    const updatedTheme = {
      ...this.state.theme,
      palette: {
        ...this.state.theme.palette,
        type: type === "light" ? "dark" : "light",
      },
    };

    this.setState({ theme: updatedTheme, count: 1 }, () =>
      console.log(this.state.theme)
    );
  };

в рендере я получил

    const {data,country,theme} = this.state;

        const themeConfig = createMuiTheme(theme);
        console.log(themeConfig);
        return(
          <MuiThemeProvider theme={themeConfig}>
 <FormControlLabel 
        control={<Switch onClick={this.useDarkMode} />}
        />
    ......content
     </MuiThemeProvider>