Update feature layer symbology with unique values

[KisakyeM]

I am new to javascript so please bear with me. I am attempting to build a widget that allows the user to select a field from a drop down list and have the feature layer in the map symbolise with unique values based on the selected field. My code is based on this sample https://community.esri.com/t5/web-appbuilder-custom-widgets-questions/setrenderer-error-getfieldsuse... 
The area of interest is the OnFieldChange where I am attempting to use a UniqueValueRenderer to map the feature layer. I however get this error in the chrome console "TypeError: (intermediate value).setColor is not a function". Any ideas are much appreciated.

define([
  'dojo/_base/declare',
  "dijit/_WidgetsInTemplateMixin",
  'jimu/BaseWidget',
  "esri/request",
  "dojo/_base/array",
  "esri/Color",
  "esri/tasks/UniqueValueDefinition",
  "esri/tasks/AlgorithmicColorRamp",
  "esri/layers/FeatureLayer",
  "esri/symbols/SimpleFillSymbol",
  "dojo/_base/lang",
  "dojo/on",
  "esri/tasks/GenerateRendererParameters",
  "esri/tasks/GenerateRendererTask",
  "dijit/form/Select",
  "jimu/dijit/RendererChooser",
  "esri/symbols/SimpleFillSymbol", 
  "esri/Color", 
  "esri/renderers/SimpleRenderer",
  "esri/renderers/UniqueValueRenderer"
],
  function(declare, _WidgetsInTemplateMixin, BaseWidget,
    esriRequest, arrayUtils, Color,
    UniqueValueDefinition, AlgorithmicColorRamp,
    FeatureLayer, SimpleFillSymbol,
    lang, on, GenerateRendererParameters, GenerateRendererTask, RendererChooser,
	SimpleFillSymbol, Color, SimpleRenderer, UniqueValueRenderer) {

      return declare([BaseWidget, _WidgetsInTemplateMixin], {

        baseClass: 'jimu-widget-AAA7',
        currField: null,   

        postCreate: function() {
          this.inherited(arguments);
        },

          startup: function () {       
          this.own(on(this.selectField, "change", lang.hitch(this, this.onFieldChange)));

          var landusePolygonLayer = new FeatureLayer("https://myhostname/arcgis/rest/services/Hosted/Map/FeatureServer/4", {
            id: "canada_Risk",//confirm works
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
          });
          
          //fieldInfo
          var canadaFields = esriRequest({
            url:"https://myhostname/arcgis/rest/services/Hosted/Map/FeatureServer/4",
            content:{
              f: "json"
            },
            callbackParamName : "callback"
          });
          //console.error("Fields", canadaFields)
          var fieldNames, fieldStore;
          canadaFields.then(lang.hitch(this, function(resp){
            var fields = [];
            arrayUtils.forEach(resp.fields,function(f){
              var foption = {
                value: f.name,
                label: f.alias
              };
              fields.push(foption);
            });
            this.selectField.addOption(fields);
          }), function(err){
            console.error("failed to get field names: ", err);
          });
        },

        onFieldChange: function(evt){
		  console.warn(this.selectField.get('value'));		 
			var symbol = new SimpleFillSymbol().setColor(new Color([255,0,0,0.5]));
			var renderer = new UniqueValueRenderer(symbol, this.selectField.get('value'))
            this.map.getLayer("canada_Risk").setRenderer(renderer);
		 this.map.getLayer("canada_Risk").refresh();		 
        }
      });
    });

@RobertScheitlin__GISP @ErwinSoekianto  @MichaelBranscomb @JayantaPoddar @AlixVezina @DerekLaw 

[BrianLeroux · Accepted solution]

You need to fully define the SimpleFillSymbol as described here. https://developers.arcgis.com/javascript/3/jsapi/simplefillsymbol-amd.html

The example they show sets the style of the fill, then the style and color of the outline, and finally the color of the fill.

var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
    new Color([255,0,0]), 2),new Color([255,255,0,0.25])