Problem displaying proportional symbols on point layer

[FranklinAlexander]

I am trying to display proportional symbols on a layer using a field that only has one of three integer values: 1, 2, 3.  The points will display just fine if I define the renderer using a basic circle symbol, but If I try to define the renderer by setting the Visual Variables object, the symbols won't display. I can't find any typos in the code and am not getting any errors. I have read the documentation and looked at examples and can't see anything wrong. Maybe someone can see something I am missing. Here is my code:

function _showSpeciesResultLayer(data, tip) {
        
        var fielddefs = [
            {"name": 'OID', 'type': 'esriFieldTypeOID', 'alias': 'OID'},
            {"name": 'Site_Id', 'type': 'esriFieldTypeString', 'alias': 'Site Id'},
            {"name": 'Lake', 'type': 'esriFieldTypeString', 'alias': 'Lake'},
            {"name": 'common_name', 'type': 'esriFieldTypeString', 'alias': 'Species'},
            {"name": 'Density', 'type': 'esriFieldTypeString', 'alias': 'Density'},
            {"name": 'Value', 'type': 'esriFieldTypeInteger', 'alias': 'Value'}
        ]
    
        const layerDefinition = {
            "geometryType": "esriGeometryPoint",
            "fields": fielddefs
        }

        const propSym = new SimpleMarkerSymbol ({
            "color": [179, 230, 255, 100],
            "type": "esriSMS",
            "style": "esriSMSCircle",
            "outline": {
            "type": "esriSLS",
            "color": [0, 68, 102, 175],
            "style": "esriSLSSolid",
            "width": 1
            }
        });

        const piFeatures = data.features;
        const QueryGraphics = [];
        piFeatures.forEach(function(feature) {
            let attr = feature.attributes;
            let sid = attr.Site_Id;
            attr.Species = tip[sid][0];
            attr.Density = tip[sid][1];
            attr.Value = parseInt(tip[sid][2]);
            let geom = feature.geometry;
            let point = new Point(geom.x, geom.y, new SpatialReference({wkid: 3857}));
            let ptGraph = new Graphic(point, null, attr);
            //piLayer.add(ptGraph);
            QueryGraphics.push(ptGraph);
        })

        const QueryfeatureSet = new FeatureSet();
        QueryfeatureSet.features = QueryGraphics;
        QueryfeatureSet.geometryType = "esriGeometryPoint";
        QueryfeatureSet.spatialReference = new SpatialReference({ wkid:3857});

        const featureCollection = {
        layerDefinition: layerDefinition,
        featureSet: QueryfeatureSet
        };

        resultLayer =	new FeatureLayer(featureCollection, {
        id: "Point Intercepts",
        opacity: 0.75,
        outFields: ["*"]
        });

        if (resultLayer.graphics.length != QueryGraphics.length){
            for(var i = 1; i < QueryGraphics.length; i++) {
              resultLayer.add(QueryGraphics[i]);
            }            
        }

        const piTip = new ToolTip({
            id: "",
            style: "position:absolute; z-index:100; background-color:transparent;"
          });
          piTip.startup()

        const propRend = new Renderer(propSym);
        propRend.setVisualVariables([{
            'type': 'sizeInfo',
            'field': 'Value',
            //'minDataValue': 1,  //optional and doesn't seem to matter if 
            //'maxDataValue': 3,  //these properties are commented out or not
            'valueUnit': 'unknown',
            'showLegend': true,
            'legendOptions': {
                'customValues': ['1', '2', '3']
            },
            'minSize': {
                'type': 'sizeInfo',
                'valueExpression': 'view.scale',
                'stops': [
                    {'value': 3, 'size': 6},
                    {'value': 2, 'size': 4},
                    {'value': 1, 'size': 2}
                ]
            },
            'maxSize': {
                'type': 'sizeInfo',
                'valueExpression': 'view.scale',
                'stops': [
                    {'value': 3, 'size': 20},
                    {'value': 2, 'size': 15},
                    {'value': 1, 'size': 10}
                ]
            }
        }])

        //const render = new SimpleRenderer(propSym);
        resultLayer.setRenderer(propRend); //proportional renerer does not work
        //resultLayer.setRenderer(render); //this renderer works
        map.addLayer(resultLayer);

Here is a screenshot of the layer properties from the console. The properties look like they are being applied correctly to the layer so maybe there is another issue:

Thanks for any suggestions.