diff --git a/x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx b/x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
index a28dc41fa179..db42c90d49eb 100644
--- a/x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
@@ -9,12 +9,11 @@ import React, { useRef, FC } from 'react';
 import { TooltipValueFormatter } from '@elastic/charts';
 import useObservable from 'react-use/lib/useObservable';
 
-import { chartTooltip$, ChartTooltipValue } from './chart_tooltip_service';
+import { chartTooltip$, ChartTooltipState, ChartTooltipValue } from './chart_tooltip_service';
 
 type RefValue = HTMLElement | null;
 
-function useRefWithCallback() {
-  const chartTooltipState = useObservable(chartTooltip$);
+function useRefWithCallback(chartTooltipState?: ChartTooltipState) {
   const ref = useRef<RefValue>(null);
 
   return (node: RefValue) => {
@@ -66,7 +65,7 @@ const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFo
 
 export const ChartTooltip: FC = () => {
   const chartTooltipState = useObservable(chartTooltip$);
-  const chartTooltipElement = useRefWithCallback();
+  const chartTooltipElement = useRefWithCallback(chartTooltipState);
 
   if (chartTooltipState === undefined || !chartTooltipState.isTooltipVisible) {
     return <div className="mlChartTooltip mlChartTooltip--hidden" ref={chartTooltipElement} />;