Promise doesn't hand over return

Question

class UserStorage {
  async loginUser(id, pw) {
    await setTimeout(() => {
      if (
        (id === "ellie" && pw === "dream") ||
        (id === "coder" && pw === "academy")
      )
        return id;
      else return new Error("not found user info");
    }, 1000);
  }
  async getRoles(user) {
    if (user === "ellie") return { name: "ellie", role: "admin" };
    else return new Error("no access");
  }
}
const userStorage = new UserStorage();

const id = prompt("wowSans");
const password = prompt("pw");

userStorage
  .loginUser(id,password)
  .then(userStorage.getRoles)
  .then((value) => console.log(`Hi ${value.name}! Your Role is ${value.role}!`))
  .catch(console.log);

I want print "Hi ellie! Your Role is admin!" but it doesn't working. it printed "Hi Error! Your Role is Undefined!" I encountered Promise and async/await for the first time today. Does someone know a suitable solution? Please answer!