Vega-tooltips won't show if I have 2 customized vega-tooltips in React component

[cheerworld]

`import { Handler } from 'vega-tooltip';

const options = {
theme: "dark",
offsetX: 10,
offsetY: 10,
disableDefaultStyle: true,
styleId: 'vega-tooltip-style'
}

export default function DataHealthImage(): JSX.Element {
return (

<VegaLite
spec={graphs[activeStep].spec1}
data={graphs[activeStep].data1}
tooltip={new Handler(options).call}
/>
<VegaLite
spec={graphs[activeStep].spec2}
data={graphs[activeStep].data2}
tooltip={new Handler(options).call}
/>

}
`
I have 2 vega graphs in this component. When I only call Vega-tooltip in one VegaLite graph, the theme does apply, and works.
After I added the handler call to the other graph, and refresh the page, tooltips are gone and didn't work.

If I make some changes, delete one tooltip handler call from the vega graph and add it back without refresh the page, the tooltips does show.

I am not sure what the problem is. How can I get both graphs to show customized tooltips after refreshing?

Please help