The object property value is not updating it's reference in an auxiliary object

Question

I have an auxiliary array of objects that I set upon receiving a successful http request, I'm using this to e.g show/hide cards in my website.

example:

getDetails() {
this.subscription = this.genericService.getDetails(id).subscribe(
      (data) => {
        this.object = data;
        this.setNavObj()}) *//sets the auxiliary array*
}


setNavObj() {
    this.navObjs = [
      { label: "Title", ref: "title", visible: this.visibleObject(),  error: false } 
    ],
}

visibleObject(){
return this.object?.show == 'S' 
}

My problem is, even though I'm changing the property show of this.object, this change is not reflected in the auxiliary object contained in the array navObjs.

Making a console.log(), we can see that although the original object has updated it's property value (this.object.show) the auxiliary array containing a reference to this object remains with the initial value set upon the http response.

I thought this would update seamlessly as I'm using a reference of this.object but maybe there's something I'm missing here.