Не обновляется значение Context с использованием Consumer?

Уважаемые разработчики. У меня появилась непонятная проблема в простейшем коде. Я решил на элементарном примере разобраться с Context, useContext и Consumer. Но в итого получил ошибку, которую не понятно как решать.

-----> Файл App.js

import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';
import { useEffect } from 'react';
  
const App = () => {
    
    var state = {themes: themes.dark.background}
    var toggleTheme = function(a){
      console.log('Вызов функции(state перед обновлением) - ', state)
      a.themes = themes.light.background
    }
    console.log('State(в обшем потоке без useEffect) - ', state)
    useEffect(() => {console.log('State(useEffect) - ', state)},[state])

    return (
        <ThemeContext.Provider value={{state, toggleTheme}}>
          <ThemedButton />
        </ThemeContext.Provider>
      );
    
  }

  export default App

В файле App.js я меняю state после вызова функции toggleTheme. toggleTheme и state передаю в Context

-----> Файл themed-button.js

import {ThemeContext} from './theme-context';
  
function ThemedButton(props) {
  return (

    <ThemeContext.Consumer>
      {({state, toggleTheme}) => (
        <div><button
          onClick={() => toggleTheme(state)}
        >
          Toggle Theme
        </button>
        <div onClick={() => console.log('Конечная проверка state.themes(onClick) - ', state.themes)} style={{background: `${state.themes}`, width: '200px', height: '200px'}}></div>
        </div>
      )}
    </ThemeContext.Consumer>
  );
}

export default ThemedButton;

В файле ThemedButton я просто меняю background блока по нажатию на кнопку. В этом месте background: `${state.themes} я по-разному пробовал писать.

-----> Файл theme-context.js

import React, { useContext } from "react";

export const themes = {
    light: {
      background: '#222222',
    },
    dark: {
      background: '#eeeeee',
    },
  };

  export const ThemeContext = React.createContext({
    themes: themes.dark,
    toggleTheme: () => {}
  });

  export const useGlobalContext = () => useContext(ThemeContext)

В файле theme-context.js я задаю возможные бекграунды, создаю и експортирую контекст и делаю кастомный хук useGlobalContext(я не использовал)

-----> Моя консоль

Вопрос заключается в том что я вижу по консоли что state.themes меняется, но почему-то на деле ничего не происходит. Можете, пожалуйста, подсказать. Буду очень благодарен любой помощи! Заранее спасибо)