este es mi contexto, pero no puedo actualizar sus valores globalmente. Cambia pero no globalmente, y si actualizo la página, por ejemplo, vuelve a los valores predeterminados. ¿Que estoy haciendo mal?

 import React, { useReducer } from 'react' const initialState = { user: 'magnus', isAuth: false }; const actions = { SET_USER: "SET_USER", SET_AUTH: "SET_AUTH" }; const reducer = (state,action) => { switch(action.type) { case actions.SET_USER: return { user: action.user }; case actions.SET_AUTH: return { isAuth: action.setAuth }; default: return state; } }; export const UserContext = React.createContext(); const Provider = ({children}) => { const [state, dispatch] = useReducer(reducer, initialState); const value = { user: state.user, isAuth: state.isAuth, setUser: (user) => { dispatch({ type: actions.SET_USER, user}); }, setAuth: (auth) => { dispatch({type: actions.SET_AUTH, auth}); } }; return ( <UserContext.Provider value={value}> {children} </UserContext.Provider> ); }; export default UserContext; export { Provider };

Estoy usando esto en el otro componente:

 const { user, isAuth, setUser } = useContext(UserContext); return( <div> <h3>{user}</h3> <h3>{isAuth ? 'ok' : 'not ok'}</h3> <button onClick={() => setUser('brutus')}>change</button> </div> )

Está actualizando el usuario pero solo en este componente, si recargo la página por ejemplo, sigue diciendo 'magnus' en lugar de 'brutus'.

Este es mi index.js:

 <Provider> <App /> </Provider>

Aplicación.js:

 <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/dashboard" element={<Dashboard />} /> </Routes> </BrowserRouter>

¿Puede alguien por favor ayudarme?