JSON Object Not Updating Inside FOR Loop [duplicate]

Can someone please explain why this JSON object is not being updated? This has been annoying me for more than an hour. When I run the code on this website: https://playcode.io/1919282, the fillcolor is the same every time, however on SO, it is different through every iteration, it appears to vary based on certain website compilers…

function getRandomColor() {
    var letters = 'BCDEF'.split('');
    var color = '';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;
}

// Initial setup
var randomColor = getRandomColor();
var headerJSONstyle = { 
    font: { 
        bold: true, 
        color: { rgb: "000000" }, 
        sz: 13 
    },
    fill: {
        fgColor: { rgb: randomColor }
    }
};

console.log('Initial headerJSONstyle:', headerJSONstyle);

// Update within loop
for (var i = 0; i < 10; i++) {
    headerJSONstyle.fill.fgColor.rgb = getRandomColor();
    console.log(`Iteration ${i}:`, headerJSONstyle);
}

// Final result
console.log('Final headerJSONstyle:', headerJSONstyle);

function getRandomColor() {
    var letters = 'BCDEF'.split('');
    var color = '';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;
}

// Initial setup
var randomColor = getRandomColor();
var headerJSONstyle = { 
    font: { 
        bold: true, 
        color: { rgb: "000000" }, 
        sz: 13 
    },
    fill: {
        fgColor: { rgb: randomColor }
    }
};

console.log('Initial headerJSONstyle:', headerJSONstyle);

// Update within loop
for (var i = 0; i < 10; i++) {
    headerJSONstyle.fill.fgColor.rgb = getRandomColor();
    console.log(`Iteration ${i}:`, headerJSONstyle);
}

// Final result
console.log('Final headerJSONstyle:', headerJSONstyle);