React Context APIを使用して、複数のルートにまたがる状態を設定するにはどうすればよいですか？

コンテキストAPIがどのように機能するかを理解しようとしています。どのクラスコンポーネントからでも更新できるグローバル状態を維持したいと思います。現在、提供されている関数を使用してコンテキストを更新しようとすると、ローカルでのみ値が更新されます。私のコードでは、フィールド「Day」を「Hello」に更新しようとしていますが、変更はWriterがレンダリングされたときにのみ表示されます。ブラウザに「Reader」をレンダリングするように要求するとすぐに、値は「Day」に戻ります。なぜこれが起こるのですか？これが私のコードです。可能な限り単純化しました。

index.js:
    import React from "react";
    import ReactDOM from "react-dom";
    import {ThemeContextProvider} from "./ThemeContext";
    
    import App from "./App";
    
    ReactDOM.render(
    <ThemeContextProvider>
       <App />
    </ThemeContextProvider>,
  document.getElementById("root")
);

app.js:
import React from "react";
import Writer from "./Writer.js";
import Reader from "./Reader.js";
import { Context } from "./ThemeContext.js";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

class App extends React.Component {
  static contextType = Context;
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="app">
        <Router>
          <Switch>
            <Route path="/writer" component={Writer}></Route>
            <Route path="/reader" component={Reader}></Route>      
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;

context.js:
import React, { Component } from "react";
const Context = React.createContext();
const { Provider, Consumer } = Context

// Note: You could also use hooks to provide state and convert this into a functional component.
class ThemeContextProvider extends Component {
  state = {
    theme: "Day"
  };

  setTheme = (newTheme) => {
    this.setState({theme: newTheme})
  };

  render() {
    return <Provider value={{theme: this.state.theme, setTheme: this.setTheme}}>{this.props.children}</Provider>;
  }
}

export { ThemeContextProvider, Consumer as ThemeContextConsumer, Context };

writer.js:
import React from "react";
import {Context} from "./ThemeContext";

class Writer extends React.Component {
  static contextType = Context
  constructor(props) {
    super(props);
    this.write = this.write.bind(this)
  }

  write () {
    this.context.setTheme("hello")
  }

  render() {
    return (
      <div>
        <button onClick={this.write}>press</button>
        <p>{this.context.theme}</p> 
      </div>
    );
  }
}

export default Writer;

reader.js:
import React from "react";
import { Context, ThemeContextConsumer } from "./ThemeContext";

class Reader extends React.Component {
  static contextType = Context;
  constructor(props) {
    super(props);
  }
  render () {
    return(
          <div>
            <p>{this.context.theme}</p>
          </div>
  );}
}

export default Reader;