Difficulty in Authorization part in Reactjs

Question

Having Difficulty in Authorization part in Reactjs.In my app.js got permissions from backend and passed permissions to all components via context api . my main problem arise when user go to usercrudauthorisation.js ,and toogle the switch on / off then Permission value changes accordingly But my context api provides value i.e "u_create": 1,"u_delete": 1 at loading app.js component.The changed toogle switch button value will load when i reload the whole comoponent and re-render the app. I have supplies modulepermissions value according to module_name and what user can perform CRUD in that module via context api. i think route changes doesnot re render the app.js while route changes so that it provides module permissions accordingly? how to solve it? what will be best way to achieve it?

**app.js**
const getPermissions=()=>{}
 above function return permission={"id": 1,"module_name": "Product","role": "users","u_create": 1,"u_delete": 1,}
that i have  Passed to all components via context api shown in below code  

 let curr_module=routes.filter(route=>{
     if(window.location.pathname===route.path){
     
        return true;

      }
     return false
    })
   
 let curr_module_permission={}
 if(curr_module&&curr_module.length>0 ){
   let curr_permissions=permissions&&permissions.filter((p)=>{
  
   if(p["module_name"].toUpperCase()=== "PRODUCT" ) {

     return true
   
   }
  
   return false
 })

 if(curr_permissions.length>0){
   curr_module_permission=curr_permissions[0]

<UserContext.Provider value={{ permissions : curr_module_permission}}>

**Usercrudauthorization.js**
 Two toggle switch button i.e create ,delete i.e ON/OFF