React.JS header re-renders when redirecting

Question

I am new to React.JS. So, I am working on a website where header stays constant and has city and location selector. The city and locality selected by user is supposed to stay constant along with header throughout the website. Different pages fetch different data depending on selected city and locality (e.g.: all banners change depending on the city and locality selected by user on all pages.) . But right now whenever I redirect to another page, header re-renders and city and locality is changed back to default value, not the one selected by user.

This is my current code:

<BrowserRouter>

      <Header/>
      <Routes>
      <Route path="/" element={<Home/>}/> 
      <Route path="/About" element={<About/>}/>
      <Route path="/Contact" element={<Contact/>}/>
      <Route path="/StoreList" element={<StoreList/>}/>
      <Route path="/Categories" element={<Category/>}/>
      <Route path="/Store/:_id/*" element={<Store/>}/>
      <Route path="/StoreList/Store/:_id/*" element={<Store/>}>
            <Route path="" element={<SOffers/>}/>
            <Route path="products" element={<SProducts/>}/>
            <Route path="about" element={<SAbout/>}/>
        </Route>
      </Routes>
      <Footer/>

    </BrowserRouter>