gistfile1.tsx

interface State {
  zoomState: 'zoomstart' | 'zoomend'
}

const VisualizationContext: State = {
  zoomState: 'zoomend'
}

const Visualization = (zoomState) => {

   const svg = d3.render(data)
   const zoomObject = d3.zoom();
   
   if (zoomState === 'zoomstart') {
      svg.transition(zoomObject.translate, {x, y}).duration(500).on(dispatchState({zoomState: 'zoomend' }));
   }
}

const Panel = () => (
   <>
      <BreadCrumb />
      <PanelContent />
   <>
) useContext(VisualizationContext);


const BreadCrumb = () => {
  return (<button onClick={() => dispatchState({zoomState: 'zoomstart'})}></button>)
}

const PanelContent = () => {
   const { zoomState } == useVisualizationContextState();  
 
   return (<>
     <Visualization zoomState={zoomState} />
   <>)
}