Imagemapster Change Color On Click by Area Key

Question

I'm attempting to change the fill color of part of my image based on the area key. The color I'd like it to change to is picked from the html color picker.

function updateColor(event) {
    const p = ($('areas.key'));
    if (p) {
        var color = event.target.value;
        console.log(colorpicker.value);
        return color;
    }
    }
    var img = $('#image');
    img.mapster({
        fillOpacity: 1,
        onClick: function(e) {
            if (e.selected) {
                console.log('This is the color:', colorpicker.value, 'and this is the part:', e.key);
                img.mapster('set', true, e.key, {fillColor: colorpicker.value});
                return false;
        }},         
        mapKey: 'piece',
        areas: [
            {
                key: 'upper-right',
                render_highlight: {
                    fillOpacity: 0.5,
                    stroke: true,
                    strokeWidth: 4 
                }
            },
            {
                key: 'lower-right',
                render_highlight: {
                    fillOpacity: 0.5,

The console log command prints the exact variables I expect to see for the key and color when the on click function is run, but it will not change the color. What am I doing wrong?

Thanks!!

I've tried using the options argument as a list but I still am not getting any luck.

EDIT I've been working though this trying to use a 'highlight' action instead of set, but to no avail. I'm honestly completely stumped and would love so expertise help :)