How to change the color of a list item based on a color range

I am developing a Fusion Map of the USA. It will have the States along with additional territories.

For the additional territories, I am showing them as a list of values, where each territory has a colored box next to it (it's basically its bullet point).

What I want to do now is change the color of the bullet point (for example, Guam is red) to match the same color range as the rest of the USA Map, based on its data. So Guam, instead of having a red bullet point, should actually be blue, because its average temp is closer to 80F.

What is the best way to do this? Here is the code https://jsfiddle.net/qgLhk5bc/

If you want to re-create the map to try it, You will need these libraries

npm i fusioncharts react-fusioncharts fusionmaps @material-ui @mui

You can create a basic react app and copy the code from the jsfiddle into 'app.js'

npx create-react-app

Using a gradient scale, you can specify colors associated with specific data points. This defines an automatic gradient scale across the data range. Entities appear in unique colors as per the data value position on the gradient scale.

{
        "chart": {
            "caption": "Global Population Density",
            "theme": "fusion",
            "showLabels": "1",
            "formatNumberScale": "0"
        },
        "colorrange": {
            "minvalue": "0",
            "startlabel": "Low",
            "endlabel": "High",
            "code": "#FF4411",
            "gradient": "1",
            "color": [{
                "maxvalue": "25",
                "code": "#FFDD44",
                "displayValue": "Median"
            }, {
                "maxvalue": "100",
                "code": "#6baa01"
            }]
        },
        "data": [{
            "id": "NA",
            "value": "22.1",
            "showLabel": "1",
            "displayValue": "Moderate"
        },
        {
            "id": "SA",
            "value": "22.0",
            "showLabel": "1",
            "displayValue": "Moderate"
        },
        {
            "id": "AS",
            "value": "95.0",
            "showLabel": "1",
            "displayValue": "Dense"
        },
        {
            "id": "EU",
            "value": "72.5",
            "showLabel": "1",
            "displayValue": "Dense"
        },
        {
            "id": "AF",
            "value": "33.7",
            "showLabel": "1",
            "displayValue": "Moderate"
        },
        {
            "id": "AU",
            "value": "3.2",
            "showLabel": "1",
            "displayValue": "Sparse"
        }]
    }

To know more about this feature refer - https://www.fusioncharts.com/dev/map-guide/colouring-based-on-data-range

https://www.fusioncharts.com/dev/chart-guide/chart-configurations/legend