I am trying to get firebase firestore documents and display some of its information on the browser

When I console.log the data I get from firestore inside the then() function as shown below, it displays the data without the problem. However, if I append that data in the peopleData variable and console.log the peopleData variable, I get an empty string.

let db = getFirestore();
let peopleCollection = collection(db, 'People');

getDocs(peopleCollection)
.then((people) =>{
    people.docs.forEach(person =>{
        let personData = person.data(person);
        console.log(`${personData.Name} is an ${personData.Occupation} aged ${personData.Age}`);
    })})
.catch(err =>{
    console.log(err)
})

Here I get an empty string logged

let peopleData = ``;
getDocs(peopleCollection)
.then((people) =>{
    people.docs.forEach(person =>{
        let personData = person.data(person);
        peopleData += `${personData.Name} is an ${personData.Occupation} aged ${personData.Age}`;
    })})
.catch(err =>{
    console.log(err)
})

console.log(peopleData);