diff --git a/packages/d3-state-visualizer/src/charts/index.ts b/packages/d3-state-visualizer/src/charts/index.ts
index 4d38bd2f..90e07fa8 100644
--- a/packages/d3-state-visualizer/src/charts/index.ts
+++ b/packages/d3-state-visualizer/src/charts/index.ts
@@ -1,3 +1,4 @@
+export type { HierarchyPointNode } from 'd3';
 export type { StyleValue } from 'd3tooltip';
 export { default as tree } from './tree/tree';
 export type { Node, Options } from './tree/tree';
diff --git a/packages/d3-state-visualizer/src/charts/tree/tree.ts b/packages/d3-state-visualizer/src/charts/tree/tree.ts
index 1ed892f5..130cd7e1 100644
--- a/packages/d3-state-visualizer/src/charts/tree/tree.ts
+++ b/packages/d3-state-visualizer/src/charts/tree/tree.ts
@@ -52,7 +52,7 @@ export interface Options {
   widthBetweenNodesCoeff: number;
   transitionDuration: number;
   blinkDuration: number;
-  onClickText: (datum: Node) => void;
+  onClickText: (datum: HierarchyPointNode<Node>) => void;
   tooltipOptions: {
     disabled?: boolean;
     left?: number | undefined;
@@ -383,7 +383,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
         .attr('dy', '.35em')
         .style('fill-opacity', 0)
         .text((d) => d.data.name)
-        .on('click', (d) => onClickText(d.data));
+        .on('click', onClickText);
 
       const nodeEnterAndUpdate = nodeEnter.merge(node);
 
diff --git a/packages/d3-state-visualizer/src/index.ts b/packages/d3-state-visualizer/src/index.ts
index 340fe2fc..a2ce88d8 100644
--- a/packages/d3-state-visualizer/src/index.ts
+++ b/packages/d3-state-visualizer/src/index.ts
@@ -1,3 +1,2 @@
-export type { StyleValue } from 'd3tooltip';
 export { tree } from './charts';
-export type { Node, Options } from './charts';
+export type { HierarchyPointNode, Node, Options, StyleValue } from './charts';
diff --git a/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx b/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx
index b8a5a829..7f6c451b 100644
--- a/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx
+++ b/packages/redux-devtools-app/src/containers/monitors/ChartMonitorWrapper.tsx
@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import { connect, ResolveThunks } from 'react-redux';
 import { ChartMonitor } from '@redux-devtools/chart-monitor';
-import { NodeWithId } from 'd3-state-visualizer';
+import type { HierarchyPointNode, Node } from 'd3-state-visualizer';
 import { selectMonitorWithState } from '../../actions';
 
-export function getPath(obj: NodeWithId, inspectedStatePath: string[]) {
+export function getPath(obj: HierarchyPointNode<Node>, inspectedStatePath: string[]) {
   const parent = obj.parent;
   if (!parent) return;
   getPath(parent, inspectedStatePath);
-  let name = obj.name;
+  let name = obj.data.name;
   const item = /.+\[(\d+)]/.exec(name);
   if (item) name = item[1];
   inspectedStatePath.push(name);
@@ -20,7 +20,7 @@ type Props = DispatchProps;
 class ChartMonitorWrapper extends Component<Props> {
   static update = ChartMonitor.update;
 
-  onClickText = (data: NodeWithId) => {
+  onClickText = (data: HierarchyPointNode<Node>) => {
     const inspectedStatePath: string[] = [];
     getPath(data, inspectedStatePath);
     this.props.selectMonitorWithState('InspectorMonitor', {