REACT - Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead

Question

const [username, setUsername] = useState(null);

useEffect(async () => {
if (user) {
  const ref = doc(db, "users", `${user.uid}`);
  const snap = await getDoc(ref);
  if (snap.exists()) {
    console.log(snap.data() + "---data---");
    setUsername(snap.data().username);
  }
}

I can see the data in console. But in setUsername, its showing the error. I am using firestore.