Property Undefined After Setting in Promise [duplicate]

I’m chaining two fetch calls to fetch restaurant information. I’m using the restaurant’s id to fetch the image url from the second fetch.

During the second fetch I’m setting the restaurant’s img property with the url returned.

When I go to use this data and console log the restaurant I can see the img property with the value. BUT when I console log restaurant.img it’s undefined. What am I missing here?

This is just with pure JS and using HTML elements on the DOM.

async function fetchImages(places) {
    return places.map((place) => {
        fetch(`https://byteboard.dev/api/data/img/${place.id}`)
            .then((res) => res.json())
            .then((image) => {
                place.img = image.img;
            });
        return place;
    });
}


async function loadPlacesWithImages() {
    const placeData = await fetch('https://byteboard.dev/api/data/places').then((res) => res.json());
    const placesWithImages = await fetchImages(placeData.places);

    return placesWithImages;
}