UseContext (tsx) not updating

I'm trying to set a user from the login to have a profile page later, but for some reason, the context is not working.

This is my code:

The App.tsx right now:I've tried using useMemo but that doesn't work neither.

export const UserContext = createContext<UserContexType>({} as UserContexType);export const UserData = () => useContext(UserContext);function App() {  let myUser: User = {    name: "Usuario", points: "0", isAuthenticated: false  }  const [user, setUser] = useState<User>(myUser);  return (<UserContext.Provider value={{AuthUser : user, setAuthUser: setUser}}><BrowserRouter><AppRouter />      </BrowserRouter></UserContext.Provider>  );}export default App;

The Login.tsx:

const Login = (props: ActionProps) => {(...)const { setAuthUser} = UserData();(...)var user:User = {        name: username,         points: "10",         isAuthenticated: true      }setAuthUser(user);(...)}      

The types.tsx:

export type User = {    name: string;    points: string;    isAuthenticated: boolean;  }export type UserContexType = {    AuthUser: User;    setAuthUser: (value: User) => void;}

And the profile:

const ProfilePage = () => {    const { t } = useTranslation();    const {AuthUser} = UserData();    return(<Container sx={{ mt: 9 }} maxWidth="xl"><div ><p>{t('profile_name')}</p><p>{AuthUser.name}</p><p>{t('profile_points')}</p><p>{AuthUser.points}</p></div></Container>    )}