How to change the color of the legend for the hidden item in React Chart.js?

I am new to chart.js and having trouble with this. I have legend items, when one item gets clicked, the strike-through appears for that legend. I don't want the strike-through for the legend label. I just want to reduce a little bit of opacity. How can I achieve that?

codepen

var fillText = function(x, y, legendItem, textWidth) {
        if (legendItem.hidden) {
          // lighten the hidden text
          ctx.fillStyle = Chart.helpers.color(fontColor).lighten(0.75).rgbString();
        }
        
        ctx.fillText(legendItem.text, boxWidth + (fontSize / 2) + x, y); 
        
        // restore the original fillStyle so we dont impact the rest of the labels
        ctx.fillStyle = fontColor;
      };

This is exactly how I want it. But, since I am beginner and the above example is using pure javascript, I am not able to replicate with React Chartjs. Can someone help me with this please??

This is my playground