Возникли проблемы с UseContext с ReactJs, мне нужно изменить переменную состояния в одном компоненте и получить это обновленное состояние в другом компоненте.

Это мой App.js

function App() {
   const [patient, setPatient] = useState("1")

  return (
      <div className="App" >

        <Router>
          <Switch>
            <DepNamesContext.Provider value={{patient, setPatient}}  > 
            <Route exact path="/" >
              <HomePage   />
            </Route>
            <Route path="/EmployeeSurvey/:email/:firstName/:lastName/:code">
              <NormalSurvey />
            </Route>
            <Route  path="/VisitorSurvey/:email/:firstName/:lastName/:code" >
              <VisitorSurvey />
            </Route>
            <Route path="/NewVisitorSurvey/:email/:firstName/:lastName/:code">
              <NewVisitorSurvey />
            </Route>
            <Route path="/ConsentPage/:email/:firstName/:lastName/:code/:companyName">
              <Consent />
            </Route>
            <Route path="/Pass/:code/:name/:email">
              <Pass />
            </Route>
            <Route path="/Fail/:code">
              <Fail />
            </Route>
          
          </DepNamesContext.Provider> 

          </Switch>
        </Router>
       
      </div>
    );
  } 
export default App;

Это часть из Homepage.js

import { DepNamesContext } from "./DepNamesContext"
   const {setPatient,patient} = useContext(DepNamesContext);

Я бы использовал setPatientMinor(3), и он будет обновлен в компоненте homepage.js, но когда я попытаюсь получить доступ к состоянию пациента в компоненте VisitorSurvey.js, его исходное значение по-прежнему равно 1.