I have defined a plugin (externalTooltipHandler) for handling chart js tooltips,

// line chart config
plugins: {
          legend: false,
          tooltip: {
            enabled: false,
            // eslint-disable-next-line consistent-return
            external: (context) => {
              if (tooltipConfig?.enabled) {
                externalTooltipHandler(
                  context,
                  tooltipConfig?.axies,
                  tooltipConfig?.xFormatter,
                  tooltipConfig?.yFormatter
                );
              } else {
                return '';
              }
            },
          },
        },

I also render this chart based on day, month, year. each time I touch some point on chart it displays my custom tooltips for x/y axis, and each time I change the date from day to any other value this chart re renders based on new datasets.
The issue here is that if I touch the chart and tooltips shows and right away change the date value so it renders for example week data, tooltip doesn’t go away until I click on chart another time so it updates its value.

  {stockHistory[inscode] && (
          <LineChart
            datasetsConfig={datasetsConfig}
            tooltipConfig={tooltipConfig}
            xTicksConfig={xTicksConfig}
            yTicksConfig={yTicksConfig}
            plugins={plugins}
          />
        )}

// Chart config
  const datasetsConfig = useMemo(() => {
    return {
      labels: stockHistory[inscode]?.dt,
      datasets: [
        {
          data: stockHistory[inscode]?.v,
          borderColor:
            stockHistory[inscode]?.changePer >= 0 ? '#9DD199' : '#FFA8A8',
          borderWidth: 2,
          lineTension: 0.1,

          pointRadius: 5,
          pointHoverRadius: 6,
          pointBackgroundColor: 'transparent',
          pointHoverBackgroundColor: '#326DF6',
          pointHoverBorderWidth: 4,
          pointHoverBorderColor: '#95BEFF',
          pointBorderWidth: 0,
          pointHitRadius: 100,
        },
      ],
    };
  }, [inscode, stockHistory]);
  // Chart config

export const tooltipConfig = {
  enabled: true,
  axies: 'both',
  xFormatter: formatDateTime,
  yFormatter: persianCurrency,
};