ChartJS Piechart drawing custom shapes on hover issue

Question

I want to make a custom tooltip for a pie chart in ChartJS. For this purpose I am drawing a custom shape at the position of the cursor on hover of the chart. It works fine when I'm hovering the chart but stops working when I'm hovering any of the colours (which is the part I want of course).

Image of the custom shape when hovering the white part

Here is my code :

function tooltipPosition(chart, e) {

const { ctx, chartArea: {top, bottom, left, right, width, height} } = chart;

const coorX = e.nativeEvent.offsetX;
const coorY = e.nativeEvent.offsetY;

chart.update('none');

if (coorX >= left && coorX <= right && coorY >= top && coorY <= bottom) {

  ctx.beginPath();

  ctx.fillStyle = 'white';
  ctx.strokeStyle = 'white';
  ctx.lineJoin = 'round';
  ctx.shadowColor = 'rgba(0,0,0,0.1)';
  ctx.shadowBlur = 30;
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 2;
  ctx.fillRect(coorX, coorY, 150, 50);
  ctx.shadowColor = 'rgba(0,0,0,0)';
  ctx.lineWidth = 5;
  ctx.strokeRect(coorX, coorY, 150, 50);

  ctx.closePath();
  ctx.restore();

   }

  }

const doughnutChartRef = useRef();

  return <Doughnut ref={doughnutChartRef} onMouseMove={(e) => {tooltipPosition(doughnutChartRef.current, e)}} data={data} options={options}/>

I think the issue may have to do with some animation conflict.

If you have any idea to solve this problem it would be very nice !