My Code:

getDocs(collection(db, "courses")).then(async item=>{
    const courses = [];
    await item.forEach(async course => {
        let temp_courses = course.data();
        let topics = temp_courses.topics
        await topics.map(async (item,index) => {
            let temp_item = item;
            let exercises = item.exercises;
            const temp_exercises = []
            await Promise.all(exercises.map(async exercise=>{
                await getDoc(exercise).then(item=>{
                    temp_exercises.push(item.data())
                })                         
            }))
            temp_item.exercises = temp_exercises;
            temp_courses.topics[index] = temp_item;
        })
        courses.push(temp_courses)
    })
    console.log(courses)
    localStorage.setItem("courses", JSON.stringify(courses));
});

Problem: I am querying the course collection from my firebase, and inside the course documents, I am querying another document.

I tried to query the reference as seen and it works, but when I tried saving it into local storage the data is stored as a reference instead.

How can I store the actual data instead?

Image Attached:

Console: The exercise portion is shown

LocalStorage: The exercise portion is a reference to the document instead