Charts.js tooltip position not working properly on Zoom In

I have created a React Application.I was working on dasboard page, in which i have used chart.js for displaying data in Barchart,Pie Chart.All things was working fine,but when i try to zoom in the browser, the tooltip of the Bachart not showing properly, means when i move the cursor to the bar tooltip didn’t get displayed.but when i move the cursor to a specific point it get displayed.I am getting recursion error when i try to use the postioning function inside tooltip.
Do u have any suggestions for me . It will be a great help for me .

tooltip: {
backgroundColor: “rgba(0, 0, 0, 0.7)”,
titleFont: {
size: 12,
weight: “bold”,
},
bodyFont: {
size: 10,
},
footerFont: {
size: 8,
},
callbacks: {
label: function (tooltipItem) {
return ${tooltipItem.label}: ${tooltipItem.raw};
},
},
position: function (context) {
try {
if (!context || !context.tooltip || !context.chart) {
return { x: 0, y: 0 };
}

          const { chart, tooltip } = context;

          // Ensure canvas exists before getting bounding box
          if (!chart.canvas) {
            return { x: 0, y: 0 };
          }

          // Get bounding rectangle of the chart canvas
          const canvasRect = chart.canvas.getBoundingClientRect();
          const zoomLevel = zoomLevelRef?.current || 1;

          // Prevent recursion by avoiding unnecessary updates
          const newX = (tooltip.caretX || 0) * zoomLevel + canvasRect.left;
          const newY = (tooltip.caretY || 0) * zoomLevel + canvasRect.top;

          if (Number.isNaN(newX) || Number.isNaN(newY)) {
            return { x: 0, y: 0 }; // Return safe fallback position
          }

          return { x: Math.round(newX), y: Math.round(newY) };
        } catch (error) {
          console.error("Tooltip positioning error:", error);
          return { x: 0, y: 0 }; // Fallback to prevent crash
        }
      },
    },