Passing variable to other pages in react

I have to make global variable to be taken for all pages in the reactJs application. It is named as ‘city’ where it changes every time I am using useState of reactJs. The city is only changed in Mainpage of the react site.
When I change the city in Mainpage and direct it to other pages then the changed value of the city is not taken. It remains the default that I declared at app.js. I checked it by printing the city in the console in app.js and it changes every time when I change it in MainPage which is correct, but when I direct it to other pages the default value of the city i.e, ‘Select city’ is taken.
I use the functional component. The image of the declaration of the variable and routing is given in the image.
Mainpage is changing the city in app.js but it is not forwarded to other pages. The default value is taken for it.
I want that whenever the value of the city is changed in the MainPage the effect will show in the app.js, which is working, and also to the other pages when I go to them just like, ‘https://www.nobroker.in/home-services’, them. But the changes are not reflected to other pages.
I am using tag to redirect the window to other pages.

The code of app.js is:

function App() {

const [city, setCity] =useState(“Select City”)

const handleData = (data) => {
setCity(data)
}
console.log(city);

return (

  {/* home page  */}
  <Route exact path='/home-services' element={<HouseDeckHomeServicesMainPage city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/' element={<HouseDeckHomeServicesMainPage city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home' element={<HouseDeckHomeServicesMainPage city={city} setCity={setCity} handleData={handleData} />} />

  {/* footer pages  */}
  <Route exact path='/home-services/terms-and-conditions' element={<HouseDeckHomeServicesTC/>} />
  <Route exact path='/home-services/privacy-policy' element={<HouseDeckHomeServicesPrivacy/>} />
  <Route exact path='/home-services/return-exchange-and-refund' element={<HouseDeckHomeServicesPrivacy/>} />
  <Route exact path='/home-services/faqs' element={<HouseDeckHomeServicesFAQpage />} />

  {/* services pages  */}
  <Route exact path='/home-services/painting' element={<HouseDeckHomeServicesPainting city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/cleaning' element={<HouseDeckHomeServicesCleaning city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/home-sanitization' element={<HouseDeckHomeServicesSanitization city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/ac-repair' element={<HouseDeckHomeServicesACRepair city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/electrician' element={<HouseDeckHomeServicesElectrician city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/carpentary' element={<HouseDeckHomeServicesCarpentary city={city} setCity={setCity} handleData={handleData} />} />
  <Route exact path='/home-services/plumbing' element={<HouseDeckHomeServicesPlumbing city={city} setCity={setCity} handleData={handleData} />} />

  {/* 404 page  */}
  <Route exact path='*' element={<HouseDeckHomeServicesNotFound city={city} />} />
</Routes>
</BrowserRouter>

);
}

enter code here

please help.