Реагировать на хуки и контекстное API localstorage при обновлении

В моем SPA я использую перехватчики реакции и контекстный API. Мне нужно сохранить текущее состояние представления компонента, отображаемого с помощью контекстного API, чтобы я мог реализовать условный отрисовку глобального компонента через приложение.

У меня есть два представления на одной странице панели инструментов: обзор и подробности. Кнопка запускает глобальное изменение состояния, и представление должно быть зафиксировано на значении состояния даже при обновлении страницы.

Вот мои фрагменты кода:

Файл AppRoutes

import React, { useState } from "react";
import { Router, Route, Switch } from "react-router-dom";
import history from "../utils/history";
import { PyramidProvider } from "../context/pyramidContext";

import Dashboard from "../pages/dashboard/Dashboard";

const AppRoutes = () => {

  return (
    <div>
      <React.Suspense fallback={<span>Loading...</span>}>
          <Router history={history}>
            <Switch>
              <PyramidProvider>
                <Route path="/" component={Dashboard} />
              </PyramidProvider>
            </Switch>
          </Router>
      </React.Suspense>
    </div>
  );
};

export default AppRoutes;

Страница панели управления

import React, { useState, useEffect, useContext } from "react";
import { PyramidContext } from "../../context/pyramidContext";
import PyramidDetail from "../../components/pyramidUI/pyramidDetail";
import PyramidOverview from "../../components/pyramidUI/pyramidOverview";

const Dashboard = (props) => {
  const { info, setInfo } = useContext(PyramidContext);
  return (
    <React.Fragment>
      {info.uiname === "overview" ? <PyramidOverview /> : <PyramidDetail />}
    </React.Fragment>
  );
};

export default Dashboard;

Компонент обзора

import React, { useState, useContext } from "react";
import { PyramidContext } from "../../context/pyramidContext";

const Overview = (props) => {
  const { info, setInfo } = useContext(PyramidContext);

  return (
    <div className="d-flex flex-column dashboard_wrap">
      <main>
        <div className="d-flex">
          <button
            onClick={() => setInfo({ uiname: "detail", pyramidvalue: 1 })}
          >
            change view
          </button>
        </div>
      </main>
    </div>
  );
};

export default Overview;

Детальный компонент

import React, { useContext } from "react";
import { PyramidContext } from "../../context/pyramidContext";
// import axios from "axios";

const Detail = (props) => {
  const { info, setInfo } = useContext(PyramidContext);

  return (
    <div className="d-flex flex-column dashboard_wrap">
      <h2>Detail View</h2>
      <div>
        <button
          type="button"
          onClick={() => setInfo({ uiname: "overview", pyramidvalue: 0 })}
        >
          Back
        </button>
      </div>
    </div>
  );
};

export default Detail;

Контекстный файл

import React, { createContext, useEffect, useReducer } from "react";
let reducer = (info, newInfo) => {
  return { ...info, ...newInfo };
};
const initialState = {
  uiname: "overview",
  pyramidvalue: 0,
};
const localState = JSON.parse(localStorage.getItem("pyramidcontent"));
const PyramidContext = createContext();
function PyramidProvider(props) {
  const [info, setInfo] = useReducer(reducer, initialState || localState);
  useEffect(() => {
    localStorage.setItem("pyramidcontent", JSON.stringify(info));
  }, [info]);
  return (
    <PyramidContext.Provider
      value={{
        info,
        setInfo,
      }}
    >
      {props.children}
    </PyramidContext.Provider>
  );
}
export { PyramidContext, PyramidProvider };

Я нажимаю кнопку, чтобы отобразить detail представление, и как только страница обновится, компонент меняет свой вид на overview вместо того, чтобы оставаться на detail. Я проверил значения локального хранилища, и он правильно обновляется, но все же представление компонента не сохраняется в соответствии со значением.

Я не могу понять, где я делаю не так, пожалуйста, помогите решить эту проблему? Заранее спасибо.