I use nested proxies like so in my code:

let proxyValidator = {
  get(target, property) {
    console.log(target)
    if(typeof target[property] == "object") {
      return new Proxy(target[property], proxyValidator)
    } else {
      return target[property]
    }

  },
  set(target, property, value) {
    console.log(target)
    target[property] = value
  }
}

This makes me able to do the following:

let colors = new Proxy({
  cold: {
    darker: {
      darkBlue: "#00008b",
      darkViolet: "#330066",
    },
    lighter: {
      lightGreen: "#90ee90",
      lightBlue: "#add8e6",
    }
  },
  warm: {
    orange: "#ffa500",
    red: "#00ff00",
  }
}, proxyValidator)

// Setting red to the true red color
colors.warm.red = "#ff0000" // Works.

colors.warm.red = "#ff0000" works, and really changes the value in the colors object. However, I cannot change the color this way:

let colorReference = colors.warm.red
colorReference = "#ff0000"

Shouldn't I be getting a reference to colors.warm.red? If so, why does it not change, and how can I simulate this? It's quite important for me to use proxies because I'm developing a library.