UseContext not updating all the components

Question

TestContext.js

 import { createContext } from 'react';

const CheckoutDrawerContext = createContext({
  showDrawer: false,
  toggleCheckoutDrawer: () => {},
});

export default CheckoutDrawerContext;

TestComponent.jsx

export default function TestComponent() {

  const checkoutDrawer = useContext(CheckoutDrawerContext);

  function placeOrder() {
    console.log(checkoutDrawer.showDrawer)
      checkoutDrawer.toggleCheckoutDrawer()
    };

  return (
    <div className="cart-drawer__summary">
     <div></div>
      <button type="button" className="order-button" onClick={placeOrder}>
      submit
      </button>
    </div>
  );
};

TestComponent1.jsx

export default function TestComponent1() {

  const checkoutDrawer = useContext(CheckoutDrawerContext);

  function placeOrder() {
    console.log(checkoutDrawer.showDrawer)
      checkoutDrawer.toggleCheckoutDrawer()
    };

  return (
    <div className="cart-drawer__summary">
     <div></div>
      <button type="button" className="order-button" onClick={placeOrder}>
      submit
      </button>
    </div>
  );
};

App.js

export default function App() {
  const [showDrawer, setShowDrawer] = useState(false);

  const toggleCheckoutDrawer = () => {
    setShowDrawer(!showDrawer);
  };
    return(
      <Router>
    
    <CheckoutDrawerContext.Provider value={{ showDrawer, toggleCheckoutDrawer }}>
        <Route path="/test" exact component={TestComponent}/>
        <Route path="/test1" exact component={TestComponent1}/>
    </CheckoutDrawerContext.Provider>
        
    </Router>
    );
  }

steps: open http://localhost:3000/test, click submit button, console.log prints false, open http://localhost:3000/test1 in a different tab, click submit button, console.log prints false (why it is still false. had changed the value in the TestComponent?)

Then added console.log after calling "checkoutDrawer.toggleCheckoutDrawer()" like below,

 function placeOrder() {
    console.log(checkoutDrawer.showDrawer)
      checkoutDrawer.toggleCheckoutDrawer()
    console.log(checkoutDrawer.showDrawer)
    };

Now the console.log prints false false. (Why console.log after checkoutDrawer.toggleCheckoutDrawer() also prints false?)