I have a global user state which I am passing throughout the DOM tree using context.

// usercontext.tsx
export UserContext = React.createContext();

export default function UserProvider() {
  const [user, setUser] = React.useState();

  // some implementation which changes the user state to either a object or null

  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}

// app/layout.tsx
      ...
      <UserProvider>{children}</UserProvider>
      ...

And I'm using this context inside a component

export default function Navbar() {
    let user = React.useContext(UserContext);

    return (<>{
        user ? user.name : 'null'
    }</>);
}

How do I implement a real-time update (or refreshing Navbar whenever user state changes)?