How to create an animated Scattermapbox in Plotly.Js?

plotly.js
1

Hi there! I am trying to create an animated Scattermapbox using Plotly.js, the marker color should change over time. I tried to modify the script in the following link that animating a choropleth map but with no success:

Example :

data_arr = [{"time":'2022-05-04',"latitude":"55.98","longitude":"13.199", "value":10},  
            {"time":'2022-05-05',"latitude":"55.98", "longitude":"13.199", "value":5},  
            {"time":'2022-05-06',"latitude":"55.98", "longitude":"13.199", "value":0}];  

function filter_and_unpack(rows, key, time) {  
return rows.filter(row => row["time"] == time).map(row => row[key])}

var frames = [];
var slider_steps = [];
var d = new Date("2022-05-04");
for (var i = 0; i <= 3; i++) {
   var latitude= filter_and_unpack(data_arr , "latitude", d.toISOString().slice(0, 10));
   var longitude= filter_and_unpack(data_arr , "longitude", d.toISOString().slice(0, 10));
   var color= filter_and_unpack(data_arr , "value", d.toISOString().slice(0, 10));
   frames[i] = {data: [{latitude: latitude , longitude: longitude, color: color}], name: d.toISOString().slice(0, 10)}
   slider_steps.push ({
     label: d.toISOString().slice(0, 10),
     method: "animate",
     args: [[d.toISOString().slice(0, 10)], {
         mode: "immediate",
         transition: {duration: 300},
         frame: {duration: 300}
        }
      ]
    })
   d.setDate(d.getDate()+1);
  }

var data = [{
    type: 'scattermapbox',
    lat: frames[0].data[0].latitude,
    lon: frames[0].data[0].longitude,
    mode: 'markers',
    marker: {
      color: frames[0].data[0].color,
      cmin: 0,
      cmax: 10,
      }
}];

var layout = {
    title: 'Plot Title',
    updatemenus: [{
      x: 0.1,
      y: 0,
      yanchor: "top",
      xanchor: "right",
      showactive: false,
      direction: "left",
      type: "buttons",
      pad: {"t": 87, "r": 10},
      buttons: [{
        method: "animate",
        args: [null, {
          fromcurrent: true,
          transition: {
            duration: 200,
          },
          frame: {
            duration: 500
          }
        }],
        label: "Play"
      }, {
        method: "animate",
        args: [
          [null],
          {
            mode: "immediate",
            transition: {
              duration: 0
            },
            frame: {
              duration: 0
            }
          }
        ],
        label: "Pause"
      }]
    }],
    sliders: [{
      active: 0,
      steps: slider_steps,
      x: 0.1,
      len: 0.9,
      xanchor: "left",
      y: 0,
      yanchor: "top",
      pad: {t: 50, b: 10},
      currentvalue: {
        visible: true,
        prefix: "Year:",
        xanchor: "right",
        font: {
          size: 20,
          color: "#666"
        }
      },
      transition: {
        duration: 300,
        easing: "cubic-in-out"
      }
    }]
};

Plotly.newPlot('myDiv', data, layout).then(function() {
    Plotly.addFrames('myDiv', frames);
  });

The output of this script is a map with time slider showing the marker, but the marker color is not changing over time!

How can I make the marker color change over time?
Thanks in Advance!