React Chart js, stuck on conditionally rendering a dash or a line between data points

Question

I'm having problems conditionally rendering a dashed/regular line between data points in a scatter chart in react chart js.

Currently I have this code which I am using to test out the functionality :

borderDash: function(context:any) {
            console.log(dashedIndex,"index")
dashedIndex++

            return dashedIndex === 0? [6, 6] : [0, 0];
        
        },

dashedIndex is a global variable, since I've found out that the index inside the context object for borderDash in particular never increases. If I return [6,6] for the condition when dashedIndex is not zero, it shows a dashed line for all data points. This is the same for every other condition I've set, it always returns false, even though I've console logged dashedIndex and can see it being 0, 1, 2 ,3 and increasing. If I set the condition as dashedIndex===2, it is still returning false. I am passing this function in my data object (which I am then passing to the data property of my scatter chart) like this:

const data = {
    labels: xAxisRange, //this is just an array of labels 
    datasets: [
      {
        label: "Scatter Dataset",
        data: formattedData,
        backgroundColor: "#1FA2FF",

          borderDash: function(context:any) {
          
dashedIndex++

            return dashedIndex === 0? [0, 0] : [6, 6];
  
        },
        borderColor: "rgb(75, 192, 192)",
        borderWidth: 0.5,
        pointRadius: 5,
        pointHoverRadius: 8,
      },
    ],
  };