РЕАКЦИЯ: состояние компонента не обновляется, когда он загружается из файла cookie

У меня есть приложение React с кнопкой, которая имеет переключатель, этот переключатель позволяет отображать или скрывать некоторые представления на странице, поэтому, если пользователь нажимает кнопку переключения, он увидит одно представление (переключение ВКЛ. вид) или другое (переключение ВЫКЛ. Вид). Я должен сохранить значение этого переключателя в файле cookie, чтобы гарантировать, что при повторном посещении сайта пользователем он увидит последний выбранный вид (включение или выключение).

Я попытался решить эту проблему самым простым способом, создав новое приложение для реагирования с нуля, используя «npx create-react-app». Я также включил библиотеку npm react-cookie.

Это отлично работает, когда пользователь нажимает кнопку переключения, в файле cookie устанавливается правильное значение и отображается правильное представление. Однако, если я перезагружаю страницу, она всегда показывает неправильное представление, игнорируя значение, загруженное из файла cookie. Я не могу объяснить, почему это происходит только при загрузке страницы.

Код index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { CookiesProvider } from 'react-cookie';

ReactDOM.render(<CookiesProvider>
                    <App />
                </CookiesProvider>, 
                document.getElementById('root'));

serviceWorker.unregister();

Код приложения.js:

import React, { Component } from 'react';
import { instanceOf } from 'prop-types';
import './App.css';
import { withCookies, Cookies } from 'react-cookie';

class App extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };

  constructor(props) {
    super(props);
    const { cookies } = props;
    var valueToSet = cookies.get('toggleMode');
    console.info('Toggle Value from Cookie: ' + valueToSet);
    this.state = {
      toogle: cookies.get('toggleMode')
    };
  }

  toggleTableModeButtons = () => {
      return ( 
        <div>
          <button type = "button" onClick = {this.toggleMode}>Toggle Now!</button>
        </div>
      );
  };

  toggleMode = event => {
    const { cookies } = this.props;
    event.preventDefault();
    var toogleValueToSet = !this.state.toogle;
    this.setState(
      { toogle: toogleValueToSet }
    );
    console.info('Setting Cookie with value: ' + toogleValueToSet);
    cookies.set('toggleMode', toogleValueToSet, { path: '/' });
  }

  render() {
    const { toogle } = this.state;
    console.info('Toggle Value in RENDER: ' + toogle);
    return (
      <div>
        {this.toggleTableModeButtons()}
        <h1>
        {
          toogle ? "Toggle ON (View 1)" : "Toggle OFF (View 2)"
        }
        </h1>
      </div>
    );
  }
}

export default withCookies(App);

Мне нужно знать, что я делаю неправильно в этом примере. Любая помощь будет действительно оценена.