diff --git a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
index 2b4c1c8c8..3f8852ed7 100644
--- a/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
+++ b/desktop/app/src/ui/components/data-inspector/DataInspector.tsx
@@ -346,28 +346,30 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     );
 
     const extractValue = useCallback(
-      (data: any, depth: number) => {
+      (data: any, depth: number, path: string[]) => {
         let res;
         if (extractValueProp) {
-          res = extractValueProp(data, depth);
+          res = extractValueProp(data, depth, path);
         }
         if (!res) {
-          res = defaultValueExtractor(data, depth);
+          res = defaultValueExtractor(data, depth, path);
         }
         return res;
       },
       [extractValueProp],
     );
 
-    const res = useMemo(() => extractValue(data, depth), [
+    const res = useMemo(() => extractValue(data, depth, path), [
       extractValue,
       data,
       depth,
+      path,
     ]);
-    const resDiff = useMemo(() => extractValue(diff, depth), [
+    const resDiff = useMemo(() => extractValue(diff, depth, path), [
       extractValue,
-      data,
+      diff,
       depth,
+      path,
     ]);
     const ancestry = useMemo(
       () => (res ? parentAncestry!.concat([res.value]) : []),
@@ -554,6 +556,7 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     } else {
       descriptionOrPreview = (
         <DataPreview
+          path={path}
           type={type}
           value={value}
           extractValue={extractValue}
diff --git a/desktop/app/src/ui/components/data-inspector/DataPreview.tsx b/desktop/app/src/ui/components/data-inspector/DataPreview.tsx
index 0755915d4..ea900b383 100755
--- a/desktop/app/src/ui/components/data-inspector/DataPreview.tsx
+++ b/desktop/app/src/ui/components/data-inspector/DataPreview.tsx
@@ -17,6 +17,7 @@ import {colors} from '../colors';
 export type DataValueExtractor = (
   value: any,
   depth: number,
+  path: string[],
 ) =>
   | {
       mutable: boolean;
@@ -51,6 +52,7 @@ function intersperse(arr: Array<any>, sep: string) {
 }
 
 export default class DataPreview extends PureComponent<{
+  path: string[];
   type: string;
   value: any;
   depth: number;
@@ -62,7 +64,7 @@ export default class DataPreview extends PureComponent<{
   };
 
   render() {
-    const {depth, extractValue, type, value} = this.props;
+    const {depth, extractValue, path, type, value} = this.props;
 
     if (type === 'array') {
       return (
@@ -70,7 +72,7 @@ export default class DataPreview extends PureComponent<{
           {'['}
           {intersperse(
             value.map((element: any, index: number) => {
-              const res = extractValue(element, depth + 1);
+              const res = extractValue(element, depth + 1, path);
               if (!res) {
                 return null;
               }