My custom onHover blocked property

[Maxim1saev]

Hello!
I implement such a hover effect through the onHover function, because I did not find a solution out of the box, I also need to increase a piece of pie on hover, but there is a feeling that my function interrupts this extension.

My config :

const CHART_CONFIG = {
type: 'pie',

data: {
  datasets: [
    {
      data: data.map(({ value }) => value),
      backgroundColor: data.map(({ color }) => color),
      hoverOffset: 20, // works sometimes
    },
  ],
},

options: {
  cutout: 170,
  borderRadius: 60,

  plugins: {
    tooltip: {
      enabled: false,
    },
  },

  onHover: (event, element, chart) => {
    setCurrentIndex();

    // elem[0] - если под курсором находится элемент отображающий данные, а не просто поле canvas
    if (element[0]) {
      chart.canvas.style.cursor = 'pointer';

      chart.config.data.datasets[0].backgroundColor = defaultColors;
      chart.update();

      const indexElem = element[0].index;

      setCurrentIndex(indexElem);

      const hoverColors = chart.config.data.datasets[0].backgroundColor.map(
        (color, index) => (index !== indexElem ? rgba(color, 0.3) : color)
      );

      chart.config.data.datasets[0].backgroundColor = hoverColors;

      chart.update();

      return;
    }

    chart.canvas.style.cursor = 'default';
    chart.config.data.datasets[0].backgroundColor = defaultColors;

    chart.update();
  },

  onClick: (event, element) => {
    // TODO: понять как в круговую диаграмму прокинуть структуру типа [{id:"", value:""}...]
    // Пока на мокках просто по индексу
    const id = element[0].index + 1;

    if (id && isLink) {
      push({
        pathname: '/dispensaryGroup',
        query: { initialDiseasesClassId: id },
      });
    }
  },
},

};