title: UseContext not updating all the components
body: <p>TestContext.js</p>
  <pre><code> import { createContext } from 'react';
  
  const CheckoutDrawerContext = createContext({
    showDrawer: false,
    toggleCheckoutDrawer: () =&gt; {},
  });
  
  export default CheckoutDrawerContext;
  </code></pre>
  <p>TestComponent.jsx</p>
  <pre><code>export default function TestComponent() {
  
    const checkoutDrawer = useContext(CheckoutDrawerContext);
  
    function placeOrder() {
      console.log(checkoutDrawer.showDrawer)
        checkoutDrawer.toggleCheckoutDrawer()
      };
  
    return (
      &lt;div className=&quot;cart-drawer__summary&quot;&gt;
       &lt;div&gt;&lt;/div&gt;
        &lt;button type=&quot;button&quot; className=&quot;order-button&quot; onClick={placeOrder}&gt;
        submit
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>TestComponent1.jsx</p>
  <pre><code>export default function TestComponent1() {
  
    const checkoutDrawer = useContext(CheckoutDrawerContext);
  
    function placeOrder() {
      console.log(checkoutDrawer.showDrawer)
        checkoutDrawer.toggleCheckoutDrawer()
      };
  
    return (
      &lt;div className=&quot;cart-drawer__summary&quot;&gt;
       &lt;div&gt;&lt;/div&gt;
        &lt;button type=&quot;button&quot; className=&quot;order-button&quot; onClick={placeOrder}&gt;
        submit
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>App.js</p>
  <pre><code>export default function App() {
    const [showDrawer, setShowDrawer] = useState(false);
  
    const toggleCheckoutDrawer = () =&gt; {
      setShowDrawer(!showDrawer);
    };
      return(
        &lt;Router&gt;
      
      &lt;CheckoutDrawerContext.Provider value={{ showDrawer, toggleCheckoutDrawer }}&gt;
          &lt;Route path=&quot;/test&quot; exact component={TestComponent}/&gt;
          &lt;Route path=&quot;/test1&quot; exact component={TestComponent1}/&gt;
      &lt;/CheckoutDrawerContext.Provider&gt;
          
      &lt;/Router&gt;
      );
    }
  </code></pre>
  <p>steps:
  open http://localhost:3000/<strong>test</strong>,
  click submit button,
  console.log prints false,
  open http://localhost:3000/<strong>test1</strong> in a different tab,
  click submit button,
  console.log prints false (<strong>why it is still false. had changed the value in the TestComponent?</strong>)</p>
  <p>Then added console.log after calling &quot;checkoutDrawer.toggleCheckoutDrawer()&quot; like below,</p>
  <pre><code> function placeOrder() {
      console.log(checkoutDrawer.showDrawer)
        checkoutDrawer.toggleCheckoutDrawer()
      console.log(checkoutDrawer.showDrawer)
      };
  </code></pre>
  <p>Now the console.log prints false false. (<strong>Why console.log after checkoutDrawer.toggleCheckoutDrawer() also prints false?</strong>)</p>