Javascript Object.entries not work properly after updating an object

I am trying to get all object to append in a div but my updated values are not coming. If I assign a value while assigning my object, Object.entries can get all values.

My objects:

var allObjects = {
    ivSetObject : {
        id: "ivSet",
        url: "../assets/img/ivSet.png"
    },
    gloveObject : {
        id: "glove",
        url: "../assets/img/glove.png"
    },
    tourniqueObject: {
        id: "tournique",
        url: "../assets/img/tournique.png"
    },
    trashObject: {
        id: "trash",
        url: "../assets/img/trash.png"
    },
    glove2Object: {
        id: "glove2",
        url: "../assets/img/glove.png"
    },
    ivSet2Object: {
        id: "ivSet2",
        url: "../assets/img/ivSet.png"
    }
};


var selectedObjects = {};

I am adding values from here:

outerDiv.onclick = function () {
        Object.defineProperty(selectedObjects, key, {
            value: value
        });

        createSelectedDivs();
    };

I am trying to call values from here:

var selectedContainer = document.getElementById("selectedItems");
function createSelectedDivs() {
    console.log(selectedObjects);

    selectedContainer.innerHTML = "";

    for (const [key, value] of Object.entries(selectedObjects)) {
        console.log("aa");
        const outerDiv = document.createElement("div");
        outerDiv.className = "selectedItemCard";

        const imgDiv = document.createElement("img");
        imgDiv.src = value.url;
        outerDiv.appendChild(imgDiv);

        selectedContainer.appendChild(outerDiv);

    }
    
}

I can see selectedObjects in console.log but Object.entries(selectedObjects) is not working.

Based on mdn docs

> Normal property addition through assignment creates properties which show up during property enumeration (for...in, Object.keys(), etc.), [...]. This method allows these extra details to be changed from their defaults. By default, properties added using Object.defineProperty() are not writable, not enumerable, and not configurable.

Your code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const obj = {}
Object.defineProperty(obj, 'key', {
  value: 'value'
})
console.log(Object.entries(obj))

<!-- end snippet -->

With enumarable: true:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const obj = {}
Object.defineProperty(obj, 'key', {
  value: 'value',
  enumerable: true
})
console.log(Object.entries(obj))

<!-- end snippet -->