Custom SimpleRenderer JS 4.3

[JordanBaumgardner]

I'm trying to create a custom renderer to handle unique symbology for each feature. In 3.x I did this by intercepting the graphic-add event. I thought I had it but it always returns the 1st symbol. I assume I'm not overriding the proper method. 

I successfully subclassed the SimpleRenderer, but overriding the GetSymbol method only seems to alter the 1st one, although it get called for each feature. 

Anyone know what I'm doing wrong?

Working/Not working code

JS Bin - Collaborative JavaScript Debugging 

//Key parts:

var CustomSymbolRenderer =
SimpleRenderer.createSubclass(SimpleRenderer,
{
   getSymbol: function (prm1,prm2) {
   var sym = this.inherited(arguments);
   console.log(Math.floor(Math.random() * 255) + 1);
   sym.color = new Color([
      Math.floor(Math.random() * 255) + 1,
      Math.floor(Math.random() * 255) + 1,
      Math.floor(Math.random() * 255) + 1,
      .5]);
   return sym;
}
});

var featureLayer = new FeatureLayer({
   url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0"
   , renderer: new CustomSymbolRenderer({ symbol: new SimpleFillSymbol({ color: "red", outline: {color: [128, 128, 128, 0.5],width: "0.5px"} })

})

});

map.add(featureLayer);

[JordanBaumgardner · Accepted solution]

Figured it out.

I needed to actually change the symbol.

this.set("symbol",sym.clone());

in context:

var CustomSymbolRenderer =
SimpleRenderer.createSubclass(SimpleRenderer,
{
getSymbol: function (prm1,prm2) {
var sym = this.inherited(arguments);
console.log(Math.floor(Math.random() * 255) + 1);
sym.color = new Color([
Math.floor(Math.random() * 255) + 1,
Math.floor(Math.random() * 255) + 1,
Math.floor(Math.random() * 255) + 1,
.5]);
this.set("symbol",sym.clone());
return sym;
}
});