diff --git a/.prettierignore b/.prettierignore
index e2c61d0..812ddda 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,8 +1,9 @@
 package.json
 pnpm-lock.yaml
 node_modules
-package
+pkg
 .svelte-kit
+**/__snapshots__/*.json
 build
 dist
 tmp
\ No newline at end of file
diff --git a/packages/site/src/components/DataSelector.svelte b/packages/site/src/components/DataSelector.svelte
index fb49c54..2af3141 100644
--- a/packages/site/src/components/DataSelector.svelte
+++ b/packages/site/src/components/DataSelector.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { DATA, state, setExampleData } from '$lib/store'
+  import { DATA, treeOpts, setExampleData } from '$lib/store'
 </script>
 
 <div class="mt-2 flex items-center gap-2">
@@ -7,7 +7,7 @@
   <div>
     <select
       id="data-selector"
-      value={$state.selectedData}
+      value={$treeOpts.selectedData}
       oninput={e => setExampleData(e.currentTarget.value)}
       class="control-select"
     >
diff --git a/packages/site/src/components/DiffValue.svelte b/packages/site/src/components/DiffValue.svelte
index bd5422d..9d4d87e 100644
--- a/packages/site/src/components/DiffValue.svelte
+++ b/packages/site/src/components/DiffValue.svelte
@@ -14,7 +14,7 @@
   } = getTreeContext()
   let hasChildren = $derived(node.children.length > 0)
   let descend = $derived(!node.collapsed && hasChildren)
-  let value = $derived(node.value)
+  let value = $derived(node.getValue())
 
   function replaceSpacesWithNonBreakingSpace(value: string) {
     return value.replace(/\s/gm, ' ')
@@ -110,8 +110,8 @@
 {#if descend}
   <li class="row">
     <ul>
-      {#each node.children as child}
-        <TreeViewNode id={child.id} />
+      {#each node.children as id}
+        <TreeViewNode {id} />
       {/each}
     </ul>
   </li>
diff --git a/packages/site/src/components/PropsForm.svelte b/packages/site/src/components/PropsForm.svelte
index e55e2b9..1e55bd0 100644
--- a/packages/site/src/components/PropsForm.svelte
+++ b/packages/site/src/components/PropsForm.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { state, update } from '$lib/store'
+  import { treeOpts, update } from '$lib/store'
 </script>
 
 <fieldset class="container-sm flex flex-col border-2 p-2 text-sm">
@@ -7,35 +7,35 @@
   <div class="m-2 mt-0">
     <div class="field">
       <label for="leftIndent">--tree-view-left-indent</label>
-      <input id="leftIndent" class="bg-01 text-0B w-20 pl-1" bind:value={$state.leftIndent} />
+      <input id="leftIndent" class="bg-01 text-0B w-20 pl-1" bind:value={$treeOpts.leftIndent} />
     </div>
     <div class="field">
       <label for="lineHeight">--tree-view-li-line-height</label>
-      <input id="lineHeight" class="bg-01 text-0B w-20 pl-1" bind:value={$state.lineHeight} />
+      <input id="lineHeight" class="bg-01 text-0B w-20 pl-1" bind:value={$treeOpts.lineHeight} />
     </div>
     <div class="field">
       <label for="fontFamily">--tree-view-font-family</label>
-      <input id="fontFamily" class="bg-01 text-0B w-48 pl-1" bind:value={$state.fontFamily} />
+      <input id="fontFamily" class="bg-01 text-0B w-48 pl-1" bind:value={$treeOpts.fontFamily} />
     </div>
     <div class="field">
       <label for="fontSize">--tree-view-font-size</label>
-      <input id="fontSize" class="bg-01 text-0B w-20 pl-1" bind:value={$state.fontSize} />
+      <input id="fontSize" class="bg-01 text-0B w-20 pl-1" bind:value={$treeOpts.fontSize} />
     </div>
     <div class="field">
       <label for="keyMarginRight">--tree-view-key-margin-right</label>
       <input
         id="keyMarginRight"
         class="bg-01 text-0B w-20 pl-1"
-        bind:value={$state.keyMarginRight}
+        bind:value={$treeOpts.keyMarginRight}
       />
     </div>
     <div class="field">
       <label for="showLogButton">showLogButton</label>
-      <input id="showLogButton" type="checkbox" bind:checked={$state.showLogButton} />
+      <input id="showLogButton" type="checkbox" bind:checked={$treeOpts.showLogButton} />
     </div>
     <div class="field">
       <label for="showCopyButton">showCopyButton</label>
-      <input id="showCopyButton" type="checkbox" bind:checked={$state.showCopyButton} />
+      <input id="showCopyButton" type="checkbox" bind:checked={$treeOpts.showCopyButton} />
     </div>
     <div class="field">
       <label>treeNode</label>
@@ -52,7 +52,7 @@
       <textarea
         id="recursionOpts"
         class="bg-01 text-0B h-44"
-        value={$state.recursionOpts}
+        value={$treeOpts.recursionOpts}
         oninput={e => update('recursionOpts', e.currentTarget.value)}
       ></textarea>
     </div>
@@ -61,7 +61,7 @@
       <textarea
         id="valueFormatter"
         class="bg-01 text-0B h-44"
-        value={$state.valueFormatter}
+        value={$treeOpts.valueFormatter}
         oninput={e => update('valueFormatter', e.currentTarget.value)}
       ></textarea>
     </div>
@@ -78,7 +78,7 @@
       <textarea
         id="theme"
         class="bg-01 text-0B h-44 w-full"
-        value={$state.theme}
+        value={$treeOpts.theme}
         oninput={e => update('theme', e.currentTarget.value)}
       ></textarea>
     </div>
diff --git a/packages/site/src/components/TailwindNode.svelte b/packages/site/src/components/TailwindNode.svelte
index e1d78c3..6d8884b 100644
--- a/packages/site/src/components/TailwindNode.svelte
+++ b/packages/site/src/components/TailwindNode.svelte
@@ -14,7 +14,7 @@
     propsStore: { props: propsObj }
   } = getTreeContext()
 
-  let hasChildren = $derived(node && node.children.length > 0)
+  let hasChildren = $derived(node.children.length > 0)
   let descend = $derived(!node.collapsed && hasChildren)
 
   // Function to create truncated preview of objects and arrays
@@ -65,12 +65,13 @@
 
   // Get the appropriate value to display
   function getDisplayValue(): string {
+    const val = node.getValue()
     if (hasChildren && node.collapsed) {
       // Show truncated preview when collapsed
-      return createTruncatedPreview(node.value, node.type)
+      return createTruncatedPreview(val, node.type)
     } else {
       // Show full value when expanded or for leaf nodes
-      return $propsObj.valueFormatter?.(node.value, node) ?? String(node.value)
+      return $propsObj.valueFormatter?.(val, node) ?? String(val)
     }
   }
 
@@ -129,11 +130,7 @@
     {/if}
 
     <!-- Node content -->
-    <button
-      class="node-content"
-      class:clickable={hasChildren}
-      onclick={hasChildren ? handleToggleCollapse : undefined}
-    >
+    <button class="node-content" class:cursor-pointer={hasChildren} onclick={handleToggleCollapse}>
       <!-- Key section -->
       <div class="node-key-section">
         <span class="node-key">{node.key}:</span>
@@ -141,11 +138,7 @@
 
       <!-- Value section -->
       <div class="node-value-section">
-        <div
-          class={`node-value truncate ${getTypeClasses()}`}
-          class:clickable={hasChildren}
-          data-type={node.type}
-        >
+        <div class={`node-value truncate ${getTypeClasses()}`} data-type={node.type}>
           {getDisplayValue()}
         </div>
       </div>
@@ -190,8 +183,8 @@
 
   {#if descend}
     <div class="children-container">
-      {#each node.children as child}
-        <TreeViewNode id={child.id} />
+      {#each node.children as id}
+        <TreeViewNode {id} />
       {/each}
     </div>
   {/if}
@@ -205,7 +198,7 @@
   }
 
   .tree-node-card {
-    @apply flex items-center gap-2 rounded-lg border border-gray-200 bg-white p-2 transition-all duration-200 ease-in-out hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700;
+    @apply flex items-center gap-2 rounded-lg border border-gray-200 bg-white transition-all duration-200 ease-in-out hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700;
   }
 
   .tree-node-card.has-children {
@@ -269,7 +262,7 @@
   }
 
   .children-container {
-    @apply ml-6 mt-2 space-y-1;
+    @apply ml-6 mt-0.5 space-y-0.5;
   }
 
   /* Responsive design */
diff --git a/packages/site/src/lib/parser.ts b/packages/site/src/lib/parser.ts
index 8e8e6e9..1d0ce3b 100644
--- a/packages/site/src/lib/parser.ts
+++ b/packages/site/src/lib/parser.ts
@@ -13,13 +13,16 @@ export const parseRecursionOpts = (
 ): Record<string, unknown> | undefined => {
   try {
     const parsed = new Function(`return ${str}`)()
+    console.log('parsed', parsed)
     if (parsed && typeof parsed === 'object') {
       parsed.isCircularNode(testNode, new Map())
       parsed.shouldExpandNode(testNode)
       parsed.mapChildren([], 'array', testNode)
       return parsed
     }
-  } catch (e) {}
+  } catch (e) {
+    console.log('e', e)
+  }
   return undefined
 }
 
@@ -30,10 +33,12 @@ export const parseValueFormatter = (
   try {
     const parsed = new Function(`return ${str}`)()
     if (typeof parsed === 'function') {
-      parsed(testNode.value, testNode)
+      parsed(testNode.getValue(), testNode)
       return parsed
     }
-  } catch (e) {}
+  } catch (e) {
+    console.log('e', e)
+  }
   return undefined
 }
 
diff --git a/packages/site/src/lib/store.ts b/packages/site/src/lib/store.ts
index 24d2162..d775088 100644
--- a/packages/site/src/lib/store.ts
+++ b/packages/site/src/lib/store.ts
@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store'
-import type { TreeRecursionOpts } from 'svelte-tree-view'
+import type { TreeNode, TreeRecursionOpts, TreeViewProps } from 'svelte-tree-view'
 
 import * as parser from './parser'
 
@@ -31,77 +31,105 @@ export interface FormState {
   theme: string
 }
 
-export const DEFAULT_STATE: FormState = {
-  data: '',
-  selectedData: null,
-  leftIndent: '0.875em',
-  lineHeight: '1.1',
-  fontFamily: 'Helvetica Neue',
-  fontSize: '13px',
-  keyMarginRight: '0.5em',
-  showLogButton: false,
-  showCopyButton: false,
-  recursionOpts: `{
+const DEFAULT_RECUR_OPTS: TreeRecursionOpts = {
   maxDepth: 16,
   omitKeys: [],
   stopCircularRecursion: false,
   isCircularNode(node, iteratedValues) {
     if (node.type === 'object' || node.type === 'array') {
-      const existingNodeWithValue = iteratedValues.get(node.value)
+      const existingNodeWithValue = iteratedValues.get(node.getValue())
       if (existingNodeWithValue && node.id !== existingNodeWithValue.id) {
         node.circularOfId = existingNodeWithValue.id
         return false
       }
-      iteratedValues.set(node.value, node)
+      iteratedValues.set(node.getValue(), node)
     }
     return true
   },
-  shouldExpandNode: (node) => {
+  shouldExpandNode(node) {
     return true
   },
   mapChildren(value, type, parent) {
     switch (type) {
       case 'array':
-        return value.map((v, i) => [i.toString(), v])
+        return (value as Array<any>).map((v, i) => [i.toString(), v])
       case 'map':
-        const entries = Array.from(value.entries())
+        const entries = Array.from((value as Map<string, any>).entries())
         return entries.map(([key, value], i) => [
-          \`[map entry \${i}]\`,
+          `[map entry ${i}]`,
           {
             '[key]': key,
             '[value]': value
           }
         ])
       case 'set':
-        return Array.from(value.values()).map((v, i) => [\`[set entry \${i}]\`, v])
+        return Array.from(value.values()).map((v, i) => [`[set entry ${i}]`, v])
       case 'object':
         return Object.entries(value)
       default:
         return []
     }
   }
-}`,
-  valueFormatter: `(val, node) => {
+}
+
+const recurOptsToString = () =>
+  Object.entries(DEFAULT_RECUR_OPTS)
+    .reduce<string[]>((acc, [key, val], idx) => {
+      if (idx === 0) {
+        acc.push('{')
+      }
+      let str
+      if (Array.isArray(val)) {
+        str = `  ${key}: [${val}],`
+      } else if (typeof val === 'function') {
+        str = `  ${val},`
+      } else {
+        str = `  ${key}: ${val},`
+      }
+      acc.push(str)
+      if (key === 'mapChildren') {
+        acc.push('}')
+      }
+      return acc
+    }, [])
+    .join('\n')
+
+const valueFormatter: TreeViewProps['valueFormatter'] = (val, node) => {
   switch (node.type) {
     case 'array':
-      return \u0060\${node.circularOfId ? 'circular' : ''} [] \${val.length} items\u0060
+      return `${node.circularOfId ? 'circular' : ''} [] ${val.length} items`
     case 'object':
-      return \u0060\${node.circularOfId ? 'circular' : ''} {} \${Object.keys(val).length} keys\u0060
+      return `${node.circularOfId ? 'circular' : ''} {} ${Object.keys(val).length} keys`
     case 'map':
     case 'set':
-      return \u0060\${node.circularOfId ? 'circular' : ''} () \${val.size} entries\u0060
+      return `${node.circularOfId ? 'circular' : ''} () ${val.size} entries`
     case 'date':
-      return \u0060\${val.toISOString()}\u0060
+      return `${val.toISOString()}`
     case 'string':
-      return \u0060"\${val}"\u0060
+      return `"${val}"`
+    case 'number':
+      return val
     case 'boolean':
       return val ? 'true' : 'false'
     case 'symbol':
       return String(val)
     default:
-      return val
+      return node.type
   }
-}`,
+}
+
+export const DEFAULT_STATE: FormState = {
+  data: '',
+  selectedData: null,
+  leftIndent: '0.875em',
+  lineHeight: '1.1',
+  fontFamily: 'Helvetica Neue',
+  fontSize: '13px',
+  keyMarginRight: '0.5em',
+  showLogButton: false,
+  showCopyButton: false,
+  recursionOpts: recurOptsToString(),
+  valueFormatter: valueFormatter.toString(),
   theme: `{
   scheme: 'monokai',
   base00: '#363755', // main blue bg
@@ -122,11 +150,11 @@ export const DEFAULT_STATE: FormState = {
   base0F: '#D6724C'
 }`
 }
-const testNode = {
+const testNode: TreeNode = {
   id: '[1]',
   index: 0,
   key: `test`,
-  value: [1, 2, 3],
+  getValue: () => [1, 2, 3],
   depth: 0,
   collapsed: false,
   type: 'array',
@@ -136,7 +164,7 @@ const testNode = {
   children: []
 }
 
-export const state = writable(DEFAULT_STATE)
+export const treeOpts = writable(DEFAULT_STATE)
 export const parsedData = writable<any>(example1)
 export const parsedRecursionOpts = writable<TreeRecursionOpts>(
   parser.parseRecursionOpts(DEFAULT_STATE.recursionOpts, testNode)
@@ -149,11 +177,11 @@ export const parsedTheme = writable(parser.parseTheme(DEFAULT_STATE.theme))
 export function setExampleData(str: string) {
   const opt = str as DataOption
   parsedData.set(DATA[opt])
-  state.update(s => ({ ...s, selectedData: opt }))
+  treeOpts.update(s => ({ ...s, selectedData: opt }))
 }
 
 export function update<K extends keyof FormState>(key: K, val: FormState[K]) {
-  state.update(o => {
+  treeOpts.update(o => {
     o[key] = val
     if (key === 'data') {
       o.selectedData = null
diff --git a/packages/site/src/routes/+layout.svelte b/packages/site/src/routes/+layout.svelte
index 18df138..59e077b 100644
--- a/packages/site/src/routes/+layout.svelte
+++ b/packages/site/src/routes/+layout.svelte
@@ -3,17 +3,17 @@
 
   import DataSelector from '$components/DataSelector.svelte'
   import PropsForm from '$components/PropsForm.svelte'
-  import { state, parsedTheme, update } from '$lib/store'
+  import { treeOpts, parsedTheme, update } from '$lib/store'
 
   import '../app.css'
 
   let { children } = $props()
 
-  let leftIndent = $derived($state.leftIndent)
-  let lineHeight = $derived($state.lineHeight)
-  let fontFamily = $derived($state.fontFamily)
-  let fontSize = $derived($state.fontSize)
-  let keyMarginRight = $derived($state.keyMarginRight)
+  let leftIndent = $derived($treeOpts.leftIndent)
+  let lineHeight = $derived($treeOpts.lineHeight)
+  let fontFamily = $derived($treeOpts.fontFamily)
+  let fontSize = $derived($treeOpts.fontSize)
+  let keyMarginRight = $derived($treeOpts.keyMarginRight)
 
   $effect(() => {
     leftIndent && document.documentElement.style.setProperty(`--tree-view-left-indent`, leftIndent)
@@ -84,7 +84,7 @@
       <textarea
         class="bg-06 text-00 w-1/2 border p-2 placeholder-gray-500"
         data-test-id="input-textarea"
-        value={$state.data}
+        value={$treeOpts.data}
         placeholder={`Eg. {"a": 1, "b": [1,2,3]}`}
         oninput={e => update('data', e.currentTarget.value)}
       ></textarea>
diff --git a/packages/site/src/routes/+page.svelte b/packages/site/src/routes/+page.svelte
index de7fd01..be86c3a 100644
--- a/packages/site/src/routes/+page.svelte
+++ b/packages/site/src/routes/+page.svelte
@@ -4,7 +4,7 @@
 
   import { mapDocDeltaChildren } from '$lib/mapDocDeltaChildren'
   import {
-    state,
+    treeOpts,
     parsedData,
     parsedRecursionOpts,
     parsedTheme,
@@ -25,8 +25,8 @@
 
 <TreeView
   data={$parsedData}
-  showLogButton={$state.showLogButton}
-  showCopyButton={$state.showCopyButton}
+  showLogButton={$treeOpts.showLogButton}
+  showCopyButton={$treeOpts.showCopyButton}
   recursionOpts={$parsedRecursionOpts}
   valueFormatter={$parsedValueFormatter}
   theme={$parsedTheme}
diff --git a/packages/site/src/routes/circular/+page.svelte b/packages/site/src/routes/circular/+page.svelte
index 10c3275..d49b7ea 100644
--- a/packages/site/src/routes/circular/+page.svelte
+++ b/packages/site/src/routes/circular/+page.svelte
@@ -4,7 +4,7 @@
 
   import { mapDocDeltaChildren } from '$lib/mapDocDeltaChildren'
   import {
-    state,
+    treeOpts,
     parsedData,
     parsedRecursionOpts,
     parsedTheme,
@@ -28,8 +28,8 @@
 
 <TreeView
   data={$parsedData}
-  showLogButton={$state.showLogButton}
-  showCopyButton={$state.showCopyButton}
+  showLogButton={$treeOpts.showLogButton}
+  showCopyButton={$treeOpts.showCopyButton}
   recursionOpts={$parsedRecursionOpts}
   valueFormatter={$parsedValueFormatter}
   theme={$parsedTheme}
diff --git a/packages/site/src/routes/diff/+page.svelte b/packages/site/src/routes/diff/+page.svelte
index a736326..f40f4c3 100644
--- a/packages/site/src/routes/diff/+page.svelte
+++ b/packages/site/src/routes/diff/+page.svelte
@@ -6,7 +6,7 @@
   import { mapDocDeltaChildren } from '$lib/mapDocDeltaChildren'
   import {
     setExampleData,
-    state,
+    treeOpts,
     parsedData,
     parsedRecursionOpts,
     parsedTheme,
@@ -32,8 +32,8 @@
 
 <TreeView
   data={$parsedData}
-  showLogButton={$state.showLogButton}
-  showCopyButton={$state.showCopyButton}
+  showLogButton={$treeOpts.showLogButton}
+  showCopyButton={$treeOpts.showCopyButton}
   recursionOpts={$parsedRecursionOpts}
   valueFormatter={$parsedValueFormatter}
   theme={$parsedTheme}
diff --git a/packages/site/src/routes/tailwind/+page.svelte b/packages/site/src/routes/tailwind/+page.svelte
index 85921b6..278e0a3 100644
--- a/packages/site/src/routes/tailwind/+page.svelte
+++ b/packages/site/src/routes/tailwind/+page.svelte
@@ -4,7 +4,7 @@
   import TailwindNode from '$components/TailwindNode.svelte'
 
   import {
-    state,
+    treeOpts,
     parsedData,
     parsedRecursionOpts,
     parsedTheme,
@@ -22,8 +22,8 @@
 
 <TreeView
   data={$parsedData}
-  showLogButton={$state.showLogButton}
-  showCopyButton={$state.showCopyButton}
+  showLogButton={$treeOpts.showLogButton}
+  showCopyButton={$treeOpts.showCopyButton}
   recursionOpts={$parsedRecursionOpts}
   valueFormatter={$parsedValueFormatter}
   theme={$parsedTheme}
diff --git a/packages/svelte-tree-view/package.json b/packages/svelte-tree-view/package.json
index 7f74375..b26fed1 100644
--- a/packages/svelte-tree-view/package.json
+++ b/packages/svelte-tree-view/package.json
@@ -30,7 +30,7 @@
     "postpublish": "rm README.md LICENSE",
     "svelte-check": "svelte-check",
     "test": "pnpm test:unit && pnpm test:e2e",
-    "test:unit": "vitest run src -u",
+    "test:unit": "vitest run src",
     "test:e2e": "cypress run --browser=chrome --config baseUrl=http://localhost:5185",
     "cy": "cypress"
   },
diff --git a/packages/svelte-tree-view/src/lib/DefaultNode.svelte b/packages/svelte-tree-view/src/lib/DefaultNode.svelte
index 91d0f07..1e1db5b 100644
--- a/packages/svelte-tree-view/src/lib/DefaultNode.svelte
+++ b/packages/svelte-tree-view/src/lib/DefaultNode.svelte
@@ -10,10 +10,11 @@
     handleToggleCollapse
   }: NodeProps = $props()
   const {
-    propsStore: { props: propsObj }
+    propsStore: { props: propsObj, formatValue }
   } = getTreeContext()
-  let hasChildren = $derived(node && node.children.length > 0)
+  let hasChildren = $derived(node.children.length > 0)
   let descend = $derived(!node.collapsed && hasChildren)
+  let valueStr = $derived(formatValue(node.getValue(), node))
 </script>
 
 <li class="row" class:collapsed={node.collapsed && hasChildren} data-tree-id={node.id}>
@@ -39,7 +40,7 @@
     onclick={handleToggleCollapse}
     role="presentation"
   >
-    {$propsObj.valueFormatter?.(node.value, node)}
+    {valueStr}
   </div>
   <div class="buttons">
     {#if $propsObj.showLogButton}
@@ -53,8 +54,8 @@
 {#if descend}
   <li class="row">
     <ul>
-      {#each node.children as child}
-        <TreeViewNode id={child.id} />
+      {#each node.children as id}
+        <TreeViewNode {id} />
       {/each}
     </ul>
   </li>
diff --git a/packages/svelte-tree-view/src/lib/TreeView.svelte b/packages/svelte-tree-view/src/lib/TreeView.svelte
index 5b86ad0..d280c52 100644
--- a/packages/svelte-tree-view/src/lib/TreeView.svelte
+++ b/packages/svelte-tree-view/src/lib/TreeView.svelte
@@ -24,6 +24,7 @@
     showCopyButton,
     recursionOpts,
     valueFormatter,
+    onUpdate,
     ...rest
   }: Props = $props()
 
@@ -33,14 +34,15 @@
     showLogButton,
     showCopyButton,
     recursionOpts: { ...DEFAULT_RECURSION_OPTS, ...recursionOpts },
-    valueFormatter
+    valueFormatter,
+    onUpdate
   }
   let rootElement: HTMLElement
   const propsStore = createPropsStore(propsObj)
   const rootElementStore = createRootElementStore()
   const treeStore = createTreeStore(propsStore)
   const newRecOpts = $derived({ ...DEFAULT_RECURSION_OPTS, ...recursionOpts })
-  const tree = treeStore.tree
+  const treeChildren = $derived(treeStore.treeMap['[]']?.children)
 
   setContext<Stores>('svelte-tree-view', {
     propsStore,
@@ -61,7 +63,8 @@
       showLogButton,
       showCopyButton,
       recursionOpts: propsObj.recursionOpts,
-      valueFormatter
+      valueFormatter,
+      onUpdate
     }
     propsStore.setProps(propsObj)
   })
@@ -91,8 +94,8 @@
 </script>
 
 {#snippet children()}
-  {#each $tree.children as child}
-    <TreeViewNode id={child.id} />
+  {#each treeChildren as id}
+    <TreeViewNode {id} />
   {/each}
 {/snippet}
 
diff --git a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte
index 6438d0e..1944799 100644
--- a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte
+++ b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { getContext, onMount } from 'svelte'
-  import { get } from 'svelte/store'
+  import { getContext } from 'svelte'
 
   import DefaultNode from './DefaultNode.svelte'
   import TreeViewNode from './TreeViewNode.svelte'
@@ -16,7 +15,7 @@
 
   const { treeStore, propsStore, rootElementStore } = getContext<Stores>('svelte-tree-view')
   let { props: propsObj } = propsStore
-  let node = $state(get(treeStore.treeMap)[id] as TreeNode<any>)
+  let node = $state(treeStore.treeMap[id] as TreeNode<any>)
   let hasChildren = $derived(node && node.children.length > 0)
   let nodeProps = $derived({
     node,
@@ -24,16 +23,16 @@
     TreeViewNode: TreeViewNode,
     handleLogNode() {
       console.info('%c [svelte-tree-view]: Property added to window._node', 'color: #b8e248')
-      console.log(node.value)
+      console.log(node.getValue())
       try {
-        if (typeof window !== 'undefined') window._node = node.value
+        if (typeof window !== 'undefined') window._node = node.getValue()
       } catch (err) {
         console.error('Failed to set _node, window was undefined')
       }
     },
     handleCopyNodeToClipboard() {
       try {
-        navigator.clipboard.writeText(JSON.stringify(node.value))
+        navigator.clipboard.writeText(JSON.stringify(node.getValue()))
       } catch (err) {
         console.error('Copying node to clipboard failed: ', err)
       }
@@ -49,15 +48,6 @@
       }
     }
   })
-
-  onMount(() => {
-    treeStore.treeMap.subscribe(value => {
-      const val = value[id]
-      if (val) {
-        node = val
-      }
-    })
-  })
 </script>
 
 {#if $propsObj.treeNode}
diff --git a/packages/svelte-tree-view/src/lib/__tests__/TreeView.spec.ts b/packages/svelte-tree-view/src/lib/__tests__/TreeView.spec.ts
index faa32d0..b4e8402 100644
--- a/packages/svelte-tree-view/src/lib/__tests__/TreeView.spec.ts
+++ b/packages/svelte-tree-view/src/lib/__tests__/TreeView.spec.ts
@@ -8,8 +8,10 @@ import { generateObj } from './generateObj'
 
 import type { TreeNode } from '../types'
 
-// https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component/
+const snapPath = (i: number, j: number, name?: string) =>
+  `./__snapshots__/${i}-${j}${name ? '-' + name : ''}.json`
 
+// https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component/
 async function clickByText(container: HTMLElement, text: string, index = 0) {
   const el = (await findAllByText(container, text))[index]
   if (el) {
@@ -48,12 +50,13 @@ describe('TreeView', () => {
         stopCircularRecursion: true,
         isCircularNode(node: TreeNode, iteratedValues: Map<any, TreeNode>) {
           if (node.type === 'object' || node.type === 'array') {
-            const existingNodeWithValue = iteratedValues.get(node.value)
+            const val = node.getValue()
+            const existingNodeWithValue = iteratedValues.get(val)
             if (existingNodeWithValue) {
               node.circularOfId = existingNodeWithValue.id
               return false
             }
-            iteratedValues.set(node.value, node)
+            iteratedValues.set(val, node)
           }
           return true
         },
@@ -115,10 +118,14 @@ describe('TreeView', () => {
         ['e', { f: [9, 8, 7] }]
       ])
     }
+    let map: any
     const results = render(TreeView, {
       data,
       recursionOpts: {
         maxDepth: 4
+      },
+      onUpdate: v => {
+        map = v
       }
     })
     window.HTMLElement.prototype.scrollIntoView = vi.fn()
@@ -155,16 +162,23 @@ describe('TreeView', () => {
         maxDepth: 5,
         stopCircularRecursion: true,
         shouldExpandNode: () => false
+      },
+      onUpdate: v => {
+        map = v
       }
     })
 
+    await expect(JSON.stringify(map)).toMatchFileSnapshot(snapPath(0, 0, 'treemap'))
     // Rerendering should collapse again everything
     expect(results.container.querySelectorAll('li').length).toEqual(2)
 
     await clickByText(results.container, 'b:')
     expect(results.container.querySelectorAll('li').length).toEqual(6)
 
+    await expect(JSON.stringify(map)).toMatchFileSnapshot(snapPath(0, 1, 'treemap'))
     await clickByText(results.container, '[map entry 1]:')
+    await expect(JSON.stringify(map)).toMatchFileSnapshot(snapPath(0, 2, 'treemap'))
+
     expect(results.container.querySelectorAll('li').length).toEqual(9)
 
     await clickByText(results.container, '[value]:')
diff --git a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/0-0-treemap.json b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/0-0-treemap.json
new file mode 100644
index 0000000..f80d40e
--- /dev/null
+++ b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/0-0-treemap.json
@@ -0,0 +1 @@
+{"[]":{"id":"[]","index":-1,"key":"root","depth":0,"collapsed":false,"type":"object","path":[],"parentId":null,"circularOfId":null,"children":["[0]","[1]"]},"[0]":{"id":"[0]","index":0,"key":"a","depth":1,"collapsed":true,"type":"array","path":[0],"parentId":"[]","circularOfId":null,"children":["[0,0]","[0,1]","[0,2]"]},"[0,0]":{"id":"[0,0]","index":0,"key":"0","depth":2,"collapsed":true,"type":"number","path":[0,0],"parentId":"[0]","circularOfId":null,"children":[]},"[0,1]":{"id":"[0,1]","index":1,"key":"1","depth":2,"collapsed":true,"type":"number","path":[0,1],"parentId":"[0]","circularOfId":null,"children":[]},"[0,2]":{"id":"[0,2]","index":2,"key":"2","depth":2,"collapsed":true,"type":"number","path":[0,2],"parentId":"[0]","circularOfId":null,"children":[]},"[1]":{"id":"[1]","index":1,"key":"b","depth":1,"collapsed":true,"type":"map","path":[1],"parentId":"[]","circularOfId":null,"children":["[1,0]","[1,1]","[1,2]"]},"[1,0]":{"id":"[1,0]","index":0,"key":"[map entry 0]","depth":2,"collapsed":true,"type":"object","path":[1,0],"parentId":"[1]","circularOfId":null,"children":[]},"[1,1]":{"id":"[1,1]","index":1,"key":"[map entry 1]","depth":2,"collapsed":true,"type":"object","path":[1,1],"parentId":"[1]","circularOfId":null,"children":[]},"[1,2]":{"id":"[1,2]","index":2,"key":"[map entry 2]","depth":2,"collapsed":true,"type":"object","path":[1,2],"parentId":"[1]","circularOfId":null,"children":[]}}
\ No newline at end of file
diff --git a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/0-1-treemap.json b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/0-1-treemap.json
new file mode 100644
index 0000000..4a910b6
--- /dev/null
+++ b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/0-1-treemap.json
@@ -0,0 +1 @@
+{"[]":{"id":"[]","index":-1,"key":"root","depth":0,"collapsed":false,"type":"object","path":[],"parentId":null,"circularOfId":null,"children":["[0]","[1]"]},"[0]":{"id":"[0]","index":0,"key":"a","depth":1,"collapsed":true,"type":"array","path":[0],"parentId":"[]","circularOfId":null,"children":["[0,0]","[0,1]","[0,2]"]},"[0,0]":{"id":"[0,0]","index":0,"key":"0","depth":2,"collapsed":true,"type":"number","path":[0,0],"parentId":"[0]","circularOfId":null,"children":[]},"[0,1]":{"id":"[0,1]","index":1,"key":"1","depth":2,"collapsed":true,"type":"number","path":[0,1],"parentId":"[0]","circularOfId":null,"children":[]},"[0,2]":{"id":"[0,2]","index":2,"key":"2","depth":2,"collapsed":true,"type":"number","path":[0,2],"parentId":"[0]","circularOfId":null,"children":[]},"[1]":{"id":"[1]","index":1,"key":"b","depth":1,"collapsed":false,"type":"map","path":[1],"parentId":"[]","circularOfId":null,"children":["[1,0]","[1,1]","[1,2]"]},"[1,0]":{"id":"[1,0]","index":0,"key":"[map entry 0]","depth":2,"collapsed":true,"type":"object","path":[1,0],"parentId":"[1]","circularOfId":null,"children":["[1,0,0]","[1,0,1]"]},"[1,1]":{"id":"[1,1]","index":1,"key":"[map entry 1]","depth":2,"collapsed":true,"type":"object","path":[1,1],"parentId":"[1]","circularOfId":null,"children":["[1,1,0]","[1,1,1]"]},"[1,0,0]":{"id":"[1,0,0]","index":0,"key":"[key]","depth":3,"collapsed":true,"type":"string","path":[1,0,0],"parentId":"[1,0]","circularOfId":null,"children":[]},"[1,0,1]":{"id":"[1,0,1]","index":1,"key":"[value]","depth":3,"collapsed":true,"type":"object","path":[1,0,1],"parentId":"[1,0]","circularOfId":null,"children":[]},"[1,1,0]":{"id":"[1,1,0]","index":0,"key":"[key]","depth":3,"collapsed":true,"type":"string","path":[1,1,0],"parentId":"[1,1]","circularOfId":null,"children":[]},"[1,1,1]":{"id":"[1,1,1]","index":1,"key":"[value]","depth":3,"collapsed":true,"type":"object","path":[1,1,1],"parentId":"[1,1]","circularOfId":null,"children":[]},"[1,2]":{"id":"[1,2]","index":2,"key":"[map entry 2]","depth":2,"collapsed":true,"type":"object","path":[1,2],"parentId":"[1]","circularOfId":null,"children":["[1,2,0]","[1,2,1]"]},"[1,2,0]":{"id":"[1,2,0]","index":0,"key":"[key]","depth":3,"collapsed":true,"type":"string","path":[1,2,0],"parentId":"[1,2]","circularOfId":null,"children":[]},"[1,2,1]":{"id":"[1,2,1]","index":1,"key":"[value]","depth":3,"collapsed":true,"type":"object","path":[1,2,1],"parentId":"[1,2]","circularOfId":null,"children":[]}}
\ No newline at end of file
diff --git a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/0-2-treemap.json b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/0-2-treemap.json
new file mode 100644
index 0000000..19e8638
--- /dev/null
+++ b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/0-2-treemap.json
@@ -0,0 +1 @@
+{"[]":{"id":"[]","index":-1,"key":"root","depth":0,"collapsed":false,"type":"object","path":[],"parentId":null,"circularOfId":null,"children":["[0]","[1]"]},"[0]":{"id":"[0]","index":0,"key":"a","depth":1,"collapsed":true,"type":"array","path":[0],"parentId":"[]","circularOfId":null,"children":["[0,0]","[0,1]","[0,2]"]},"[0,0]":{"id":"[0,0]","index":0,"key":"0","depth":2,"collapsed":true,"type":"number","path":[0,0],"parentId":"[0]","circularOfId":null,"children":[]},"[0,1]":{"id":"[0,1]","index":1,"key":"1","depth":2,"collapsed":true,"type":"number","path":[0,1],"parentId":"[0]","circularOfId":null,"children":[]},"[0,2]":{"id":"[0,2]","index":2,"key":"2","depth":2,"collapsed":true,"type":"number","path":[0,2],"parentId":"[0]","circularOfId":null,"children":[]},"[1]":{"id":"[1]","index":1,"key":"b","depth":1,"collapsed":false,"type":"map","path":[1],"parentId":"[]","circularOfId":null,"children":["[1,0]","[1,1]","[1,2]"]},"[1,0]":{"id":"[1,0]","index":0,"key":"[map entry 0]","depth":2,"collapsed":true,"type":"object","path":[1,0],"parentId":"[1]","circularOfId":null,"children":["[1,0,0]","[1,0,1]"]},"[1,1]":{"id":"[1,1]","index":1,"key":"[map entry 1]","depth":2,"collapsed":false,"type":"object","path":[1,1],"parentId":"[1]","circularOfId":null,"children":["[1,1,0]","[1,1,1]"]},"[1,0,0]":{"id":"[1,0,0]","index":0,"key":"[key]","depth":3,"collapsed":true,"type":"string","path":[1,0,0],"parentId":"[1,0]","circularOfId":null,"children":[]},"[1,0,1]":{"id":"[1,0,1]","index":1,"key":"[value]","depth":3,"collapsed":true,"type":"object","path":[1,0,1],"parentId":"[1,0]","circularOfId":null,"children":[]},"[1,1,0]":{"id":"[1,1,0]","index":0,"key":"[key]","depth":3,"collapsed":true,"type":"string","path":[1,1,0],"parentId":"[1,1]","circularOfId":null,"children":[]},"[1,1,1]":{"id":"[1,1,1]","index":1,"key":"[value]","depth":3,"collapsed":true,"type":"object","path":[1,1,1],"parentId":"[1,1]","circularOfId":null,"children":["[1,1,1,0]"]},"[1,1,1,0]":{"id":"[1,1,1,0]","index":0,"key":"f","depth":4,"collapsed":true,"type":"array","path":[1,1,1,0],"parentId":"[1,1,1]","circularOfId":null,"children":[]},"[1,2]":{"id":"[1,2]","index":2,"key":"[map entry 2]","depth":2,"collapsed":true,"type":"object","path":[1,2],"parentId":"[1]","circularOfId":null,"children":["[1,2,0]","[1,2,1]"]},"[1,2,0]":{"id":"[1,2,0]","index":0,"key":"[key]","depth":3,"collapsed":true,"type":"string","path":[1,2,0],"parentId":"[1,2]","circularOfId":null,"children":[]},"[1,2,1]":{"id":"[1,2,1]","index":1,"key":"[value]","depth":3,"collapsed":true,"type":"object","path":[1,2,1],"parentId":"[1,2]","circularOfId":null,"children":[]}}
\ No newline at end of file
diff --git a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap
index 55d226e..f45233b 100644
--- a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap
+++ b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`TreeView > should render 1`] = `
         data-type="object"
         role="presentation"
       >
-        
+         {} 22 keys
       </div>
        
       <div
@@ -69,7 +69,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "6127d77c7d2ff4113f24ab5c"
           </div>
            
           <div
@@ -104,7 +104,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            0
           </div>
            
           <div
@@ -139,7 +139,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "6e72c4da-c871-4aa1-aa44-1465920b90ae"
           </div>
            
           <div
@@ -174,7 +174,7 @@ exports[`TreeView > should render 1`] = `
             data-type="boolean"
             role="presentation"
           >
-            
+            false
           </div>
            
           <div
@@ -209,7 +209,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "$2,256.26"
           </div>
            
           <div
@@ -244,7 +244,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "http://placehold.it/32x32"
           </div>
            
           <div
@@ -279,7 +279,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            22
           </div>
            
           <div
@@ -314,7 +314,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "blue"
           </div>
            
           <div
@@ -349,7 +349,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Branch Mcintosh"
           </div>
            
           <div
@@ -384,7 +384,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "male"
           </div>
            
           <div
@@ -419,7 +419,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "ENTOGROK"
           </div>
            
           <div
@@ -454,7 +454,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "branchmcintosh@entogrok.com"
           </div>
            
           <div
@@ -489,7 +489,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "+1 (843) 489-2199"
           </div>
            
           <div
@@ -524,7 +524,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "196 Gerry Street, Sylvanite, Colorado, 3630"
           </div>
            
           <div
@@ -559,7 +559,8 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Deserunt et laborum proident commodo. Irure mollit voluptate minim ut eiusmod qui deserunt culpa est nostrud. Ex duis aute ad eu. Ex in culpa culpa nulla non voluptate velit ex sint pariatur exercitation labore.
+"
           </div>
            
           <div
@@ -594,7 +595,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "2018-07-23T07:01:58 -03:00"
           </div>
            
           <div
@@ -629,7 +630,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            -39.97877
           </div>
            
           <div
@@ -664,7 +665,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            -61.667911
           </div>
            
           <div
@@ -704,7 +705,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 7 items
           </div>
            
           <div
@@ -742,7 +743,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "tempor"
               </div>
                
               <div
@@ -777,7 +778,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "laboris"
               </div>
                
               <div
@@ -812,7 +813,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "reprehenderit"
               </div>
                
               <div
@@ -847,7 +848,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "veniam"
               </div>
                
               <div
@@ -882,7 +883,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "exercitation"
               </div>
                
               <div
@@ -917,7 +918,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "velit"
               </div>
                
               <div
@@ -952,7 +953,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "voluptate"
               </div>
                
               <div
@@ -998,7 +999,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 3 items
           </div>
            
           <div
@@ -1041,7 +1042,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -1079,7 +1080,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    0
                   </div>
                    
                   <div
@@ -1114,7 +1115,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Shanna Shannon"
                   </div>
                    
                   <div
@@ -1160,7 +1161,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -1198,7 +1199,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    1
                   </div>
                    
                   <div
@@ -1233,7 +1234,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Lindsey Reed"
                   </div>
                    
                   <div
@@ -1279,7 +1280,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -1317,7 +1318,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    2
                   </div>
                    
                   <div
@@ -1352,7 +1353,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Elinor Hendricks"
                   </div>
                    
                   <div
@@ -1399,7 +1400,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Hello, Branch Mcintosh! You have 1 unread messages."
           </div>
            
           <div
@@ -1434,7 +1435,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "strawberry"
           </div>
            
           <div
@@ -1478,7 +1479,7 @@ exports[`TreeView > should render 1`] = `
         data-type="object"
         role="presentation"
       >
-        
+         {} 22 keys
       </div>
        
       <div
@@ -1516,7 +1517,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "6127d77cdce2ef8b8b42aae8"
           </div>
            
           <div
@@ -1551,7 +1552,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            1
           </div>
            
           <div
@@ -1586,7 +1587,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "8e33bdb8-d5e6-49fb-b229-ea24501c9ba3"
           </div>
            
           <div
@@ -1621,7 +1622,7 @@ exports[`TreeView > should render 1`] = `
             data-type="boolean"
             role="presentation"
           >
-            
+            true
           </div>
            
           <div
@@ -1656,7 +1657,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "$3,880.84"
           </div>
            
           <div
@@ -1691,7 +1692,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "http://placehold.it/32x32"
           </div>
            
           <div
@@ -1726,7 +1727,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            29
           </div>
            
           <div
@@ -1761,7 +1762,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "brown"
           </div>
            
           <div
@@ -1796,7 +1797,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Amy Cannon"
           </div>
            
           <div
@@ -1831,7 +1832,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "female"
           </div>
            
           <div
@@ -1866,7 +1867,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "QUILITY"
           </div>
            
           <div
@@ -1901,7 +1902,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "amycannon@quility.com"
           </div>
            
           <div
@@ -1936,7 +1937,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "+1 (842) 547-2756"
           </div>
            
           <div
@@ -1971,7 +1972,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "564 Dahlgreen Place, Sims, Washington, 9571"
           </div>
            
           <div
@@ -2006,7 +2007,8 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "In enim aliqua sint dolor laboris. Sunt veniam officia elit magna Lorem nulla occaecat culpa anim enim. Irure velit labore dolore incididunt. Aute aliquip elit ut duis anim elit esse dolor esse in nisi eiusmod tempor eiusmod. Proident eiusmod id nulla voluptate fugiat dolore do tempor dolor sunt. Adipisicing culpa quis elit enim aliquip. Tempor exercitation aute excepteur in.
+"
           </div>
            
           <div
@@ -2041,7 +2043,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "2020-09-23T10:54:44 -03:00"
           </div>
            
           <div
@@ -2076,7 +2078,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            -73.399929
           </div>
            
           <div
@@ -2111,7 +2113,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            55.693187
           </div>
            
           <div
@@ -2151,7 +2153,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 7 items
           </div>
            
           <div
@@ -2189,7 +2191,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "commodo"
               </div>
                
               <div
@@ -2224,7 +2226,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "ex"
               </div>
                
               <div
@@ -2259,7 +2261,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "elit"
               </div>
                
               <div
@@ -2294,7 +2296,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "ad"
               </div>
                
               <div
@@ -2329,7 +2331,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "magna"
               </div>
                
               <div
@@ -2364,7 +2366,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "laboris"
               </div>
                
               <div
@@ -2399,7 +2401,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "veniam"
               </div>
                
               <div
@@ -2445,7 +2447,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 3 items
           </div>
            
           <div
@@ -2488,7 +2490,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -2526,7 +2528,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    0
                   </div>
                    
                   <div
@@ -2561,7 +2563,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Barron Gonzales"
                   </div>
                    
                   <div
@@ -2607,7 +2609,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -2645,7 +2647,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    1
                   </div>
                    
                   <div
@@ -2680,7 +2682,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Therese Ramos"
                   </div>
                    
                   <div
@@ -2726,7 +2728,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -2764,7 +2766,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    2
                   </div>
                    
                   <div
@@ -2799,7 +2801,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Kirby Knight"
                   </div>
                    
                   <div
@@ -2846,7 +2848,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Hello, Amy Cannon! You have 9 unread messages."
           </div>
            
           <div
@@ -2881,7 +2883,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "apple"
           </div>
            
           <div
@@ -2925,7 +2927,7 @@ exports[`TreeView > should render 1`] = `
         data-type="object"
         role="presentation"
       >
-        
+         {} 22 keys
       </div>
        
       <div
@@ -2963,7 +2965,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "6127d77c36bbb0fbc6f1e367"
           </div>
            
           <div
@@ -2998,7 +3000,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            2
           </div>
            
           <div
@@ -3033,7 +3035,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "75500a41-98ec-4050-854f-33dfef40297c"
           </div>
            
           <div
@@ -3068,7 +3070,7 @@ exports[`TreeView > should render 1`] = `
             data-type="boolean"
             role="presentation"
           >
-            
+            false
           </div>
            
           <div
@@ -3103,7 +3105,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "$2,367.73"
           </div>
            
           <div
@@ -3138,7 +3140,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "http://placehold.it/32x32"
           </div>
            
           <div
@@ -3173,7 +3175,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            27
           </div>
            
           <div
@@ -3208,7 +3210,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "blue"
           </div>
            
           <div
@@ -3243,7 +3245,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Whitley Zamora"
           </div>
            
           <div
@@ -3278,7 +3280,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "male"
           </div>
            
           <div
@@ -3313,7 +3315,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "MEDALERT"
           </div>
            
           <div
@@ -3348,7 +3350,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "whitleyzamora@medalert.com"
           </div>
            
           <div
@@ -3383,7 +3385,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "+1 (825) 435-2054"
           </div>
            
           <div
@@ -3418,7 +3420,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "619 Macon Street, Cresaptown, Rhode Island, 2046"
           </div>
            
           <div
@@ -3453,7 +3455,8 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Reprehenderit velit cillum anim commodo est ex est deserunt quis consectetur ex proident do dolore. Pariatur minim enim ipsum nulla quis deserunt duis nisi. Excepteur occaecat quis dolor commodo consectetur. Officia laborum dolore tempor reprehenderit sit. Sit consectetur consequat aliquip qui. Est irure enim ex voluptate non aute.
+"
           </div>
            
           <div
@@ -3488,7 +3491,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "2016-03-01T09:46:19 -02:00"
           </div>
            
           <div
@@ -3523,7 +3526,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            -60.824874
           </div>
            
           <div
@@ -3558,7 +3561,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            -22.249243
           </div>
            
           <div
@@ -3598,7 +3601,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 7 items
           </div>
            
           <div
@@ -3636,7 +3639,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "minim"
               </div>
                
               <div
@@ -3671,7 +3674,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "consequat"
               </div>
                
               <div
@@ -3706,7 +3709,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "dolor"
               </div>
                
               <div
@@ -3741,7 +3744,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "duis"
               </div>
                
               <div
@@ -3776,7 +3779,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "consectetur"
               </div>
                
               <div
@@ -3811,7 +3814,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "et"
               </div>
                
               <div
@@ -3846,7 +3849,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "elit"
               </div>
                
               <div
@@ -3892,7 +3895,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 3 items
           </div>
            
           <div
@@ -3935,7 +3938,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -3973,7 +3976,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    0
                   </div>
                    
                   <div
@@ -4008,7 +4011,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Wynn Foster"
                   </div>
                    
                   <div
@@ -4054,7 +4057,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -4092,7 +4095,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    1
                   </div>
                    
                   <div
@@ -4127,7 +4130,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Gloria Saunders"
                   </div>
                    
                   <div
@@ -4173,7 +4176,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -4211,7 +4214,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    2
                   </div>
                    
                   <div
@@ -4246,7 +4249,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Vega Mcclain"
                   </div>
                    
                   <div
@@ -4293,7 +4296,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Hello, Whitley Zamora! You have 9 unread messages."
           </div>
            
           <div
@@ -4328,7 +4331,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "strawberry"
           </div>
            
           <div
@@ -4372,7 +4375,7 @@ exports[`TreeView > should render 1`] = `
         data-type="object"
         role="presentation"
       >
-        
+         {} 22 keys
       </div>
        
       <div
@@ -4410,7 +4413,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "6127d77cab3b02db4e3558ef"
           </div>
            
           <div
@@ -4445,7 +4448,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            3
           </div>
            
           <div
@@ -4480,7 +4483,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "3e68ae9a-4943-47ac-819f-2acf5f5267a9"
           </div>
            
           <div
@@ -4515,7 +4518,7 @@ exports[`TreeView > should render 1`] = `
             data-type="boolean"
             role="presentation"
           >
-            
+            true
           </div>
            
           <div
@@ -4550,7 +4553,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "$3,167.93"
           </div>
            
           <div
@@ -4585,7 +4588,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "http://placehold.it/32x32"
           </div>
            
           <div
@@ -4620,7 +4623,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            20
           </div>
            
           <div
@@ -4655,7 +4658,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "blue"
           </div>
            
           <div
@@ -4690,7 +4693,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Winters Kirk"
           </div>
            
           <div
@@ -4725,7 +4728,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "male"
           </div>
            
           <div
@@ -4760,7 +4763,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "SIGNITY"
           </div>
            
           <div
@@ -4795,7 +4798,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "winterskirk@signity.com"
           </div>
            
           <div
@@ -4830,7 +4833,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "+1 (820) 591-2943"
           </div>
            
           <div
@@ -4865,7 +4868,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "733 Mill Lane, Loma, Wyoming, 5006"
           </div>
            
           <div
@@ -4900,7 +4903,8 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Magna nulla et in dolore anim aliqua occaecat aliqua pariatur. Ut commodo duis officia minim labore. Officia aliquip ad esse commodo ea nisi Lorem esse in. Ipsum nulla ea nisi ea magna tempor veniam.
+"
           </div>
            
           <div
@@ -4935,7 +4939,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "2020-07-15T11:06:26 -03:00"
           </div>
            
           <div
@@ -4970,7 +4974,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            -60.058287
           </div>
            
           <div
@@ -5005,7 +5009,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            88.480295
           </div>
            
           <div
@@ -5045,7 +5049,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 7 items
           </div>
            
           <div
@@ -5083,7 +5087,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "occaecat"
               </div>
                
               <div
@@ -5118,7 +5122,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "pariatur"
               </div>
                
               <div
@@ -5153,7 +5157,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "dolor"
               </div>
                
               <div
@@ -5188,7 +5192,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "irure"
               </div>
                
               <div
@@ -5223,7 +5227,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "sit"
               </div>
                
               <div
@@ -5258,7 +5262,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "eu"
               </div>
                
               <div
@@ -5293,7 +5297,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "et"
               </div>
                
               <div
@@ -5339,7 +5343,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 3 items
           </div>
            
           <div
@@ -5382,7 +5386,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -5420,7 +5424,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    0
                   </div>
                    
                   <div
@@ -5455,7 +5459,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Suarez Hale"
                   </div>
                    
                   <div
@@ -5501,7 +5505,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -5539,7 +5543,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    1
                   </div>
                    
                   <div
@@ -5574,7 +5578,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Helen Pearson"
                   </div>
                    
                   <div
@@ -5620,7 +5624,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -5658,7 +5662,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    2
                   </div>
                    
                   <div
@@ -5693,7 +5697,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Misty Rosario"
                   </div>
                    
                   <div
@@ -5740,7 +5744,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Hello, Winters Kirk! You have 3 unread messages."
           </div>
            
           <div
@@ -5775,7 +5779,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "banana"
           </div>
            
           <div
@@ -5819,7 +5823,7 @@ exports[`TreeView > should render 1`] = `
         data-type="object"
         role="presentation"
       >
-        
+         {} 22 keys
       </div>
        
       <div
@@ -5857,7 +5861,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "6127d77cb75a6937b0cf29dc"
           </div>
            
           <div
@@ -5892,7 +5896,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            4
           </div>
            
           <div
@@ -5927,7 +5931,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "bbb12452-3b75-4d3e-b36b-6fcfff003537"
           </div>
            
           <div
@@ -5962,7 +5966,7 @@ exports[`TreeView > should render 1`] = `
             data-type="boolean"
             role="presentation"
           >
-            
+            true
           </div>
            
           <div
@@ -5997,7 +6001,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "$2,406.91"
           </div>
            
           <div
@@ -6032,7 +6036,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "http://placehold.it/32x32"
           </div>
            
           <div
@@ -6067,7 +6071,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            26
           </div>
            
           <div
@@ -6102,7 +6106,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "green"
           </div>
            
           <div
@@ -6137,7 +6141,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Hill Levine"
           </div>
            
           <div
@@ -6172,7 +6176,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "male"
           </div>
            
           <div
@@ -6207,7 +6211,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "ZAJ"
           </div>
            
           <div
@@ -6242,7 +6246,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "hilllevine@zaj.com"
           </div>
            
           <div
@@ -6277,7 +6281,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "+1 (987) 429-2624"
           </div>
            
           <div
@@ -6312,7 +6316,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "434 Cooke Court, Elfrida, Utah, 9346"
           </div>
            
           <div
@@ -6347,7 +6351,8 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Pariatur elit est eiusmod aliquip eu ad consectetur velit qui proident sit. Elit irure magna ex voluptate occaecat. Amet veniam voluptate laboris Lorem minim id irure. Laborum eu proident qui est ex nulla deserunt commodo adipisicing qui irure ea cillum nulla. Ut culpa mollit Lorem fugiat laboris duis fugiat. Sint magna anim voluptate irure aliqua magna incididunt reprehenderit aute mollit reprehenderit quis mollit.
+"
           </div>
            
           <div
@@ -6382,7 +6387,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "2015-11-20T07:07:25 -02:00"
           </div>
            
           <div
@@ -6417,7 +6422,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            14.786267
           </div>
            
           <div
@@ -6452,7 +6457,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            -28.163592
           </div>
            
           <div
@@ -6492,7 +6497,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 7 items
           </div>
            
           <div
@@ -6530,7 +6535,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "id"
               </div>
                
               <div
@@ -6565,7 +6570,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "pariatur"
               </div>
                
               <div
@@ -6600,7 +6605,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "commodo"
               </div>
                
               <div
@@ -6635,7 +6640,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "laboris"
               </div>
                
               <div
@@ -6670,7 +6675,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "occaecat"
               </div>
                
               <div
@@ -6705,7 +6710,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "nulla"
               </div>
                
               <div
@@ -6740,7 +6745,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "nostrud"
               </div>
                
               <div
@@ -6786,7 +6791,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 3 items
           </div>
            
           <div
@@ -6829,7 +6834,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -6867,7 +6872,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    0
                   </div>
                    
                   <div
@@ -6902,7 +6907,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Gladys Matthews"
                   </div>
                    
                   <div
@@ -6948,7 +6953,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -6986,7 +6991,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    1
                   </div>
                    
                   <div
@@ -7021,7 +7026,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Pittman Lewis"
                   </div>
                    
                   <div
@@ -7067,7 +7072,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -7105,7 +7110,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    2
                   </div>
                    
                   <div
@@ -7140,7 +7145,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Marci Pugh"
                   </div>
                    
                   <div
@@ -7187,7 +7192,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Hello, Hill Levine! You have 4 unread messages."
           </div>
            
           <div
@@ -7222,7 +7227,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "strawberry"
           </div>
            
           <div
@@ -7266,7 +7271,7 @@ exports[`TreeView > should render 1`] = `
         data-type="object"
         role="presentation"
       >
-        
+         {} 22 keys
       </div>
        
       <div
@@ -7304,7 +7309,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "6127d77c8e3565e495329780"
           </div>
            
           <div
@@ -7339,7 +7344,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            5
           </div>
            
           <div
@@ -7374,7 +7379,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "e6b6f813-4081-4aae-a0bb-2dba74f15368"
           </div>
            
           <div
@@ -7409,7 +7414,7 @@ exports[`TreeView > should render 1`] = `
             data-type="boolean"
             role="presentation"
           >
-            
+            false
           </div>
            
           <div
@@ -7444,7 +7449,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "$3,874.14"
           </div>
            
           <div
@@ -7479,7 +7484,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "http://placehold.it/32x32"
           </div>
            
           <div
@@ -7514,7 +7519,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            20
           </div>
            
           <div
@@ -7549,7 +7554,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "green"
           </div>
            
           <div
@@ -7584,7 +7589,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Hawkins Benton"
           </div>
            
           <div
@@ -7619,7 +7624,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "male"
           </div>
            
           <div
@@ -7654,7 +7659,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "COMVEYER"
           </div>
            
           <div
@@ -7689,7 +7694,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "hawkinsbenton@comveyer.com"
           </div>
            
           <div
@@ -7724,7 +7729,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "+1 (863) 401-3632"
           </div>
            
           <div
@@ -7759,7 +7764,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "994 Havens Place, Cazadero, Arizona, 7731"
           </div>
            
           <div
@@ -7794,7 +7799,8 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Deserunt culpa magna culpa sit aliqua eu ut enim ex aliquip quis sit ut qui. Id Lorem tempor Lorem do enim tempor tempor. Nisi proident commodo ea voluptate. Sint ad laborum proident nostrud incididunt deserunt quis amet. Anim exercitation do irure do eiusmod ad consequat aliqua et.
+"
           </div>
            
           <div
@@ -7829,7 +7835,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "2016-12-24T11:40:01 -02:00"
           </div>
            
           <div
@@ -7864,7 +7870,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            -74.812367
           </div>
            
           <div
@@ -7899,7 +7905,7 @@ exports[`TreeView > should render 1`] = `
             data-type="number"
             role="presentation"
           >
-            
+            161.825889
           </div>
            
           <div
@@ -7939,7 +7945,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 7 items
           </div>
            
           <div
@@ -7977,7 +7983,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "irure"
               </div>
                
               <div
@@ -8012,7 +8018,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "velit"
               </div>
                
               <div
@@ -8047,7 +8053,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "excepteur"
               </div>
                
               <div
@@ -8082,7 +8088,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "cillum"
               </div>
                
               <div
@@ -8117,7 +8123,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "magna"
               </div>
                
               <div
@@ -8152,7 +8158,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "culpa"
               </div>
                
               <div
@@ -8187,7 +8193,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="string"
                 role="presentation"
               >
-                
+                "ullamco"
               </div>
                
               <div
@@ -8233,7 +8239,7 @@ exports[`TreeView > should render 1`] = `
             data-type="array"
             role="presentation"
           >
-            
+             [] 3 items
           </div>
            
           <div
@@ -8276,7 +8282,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -8314,7 +8320,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    0
                   </div>
                    
                   <div
@@ -8349,7 +8355,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Meyers Harrell"
                   </div>
                    
                   <div
@@ -8395,7 +8401,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -8433,7 +8439,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    1
                   </div>
                    
                   <div
@@ -8468,7 +8474,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Rachael Rodriquez"
                   </div>
                    
                   <div
@@ -8514,7 +8520,7 @@ exports[`TreeView > should render 1`] = `
                 data-type="object"
                 role="presentation"
               >
-                
+                 {} 2 keys
               </div>
                
               <div
@@ -8552,7 +8558,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="number"
                     role="presentation"
                   >
-                    
+                    2
                   </div>
                    
                   <div
@@ -8587,7 +8593,7 @@ exports[`TreeView > should render 1`] = `
                     data-type="string"
                     role="presentation"
                   >
-                    
+                    "Ila Vaughn"
                   </div>
                    
                   <div
@@ -8634,7 +8640,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "Hello, Hawkins Benton! You have 10 unread messages."
           </div>
            
           <div
@@ -8669,7 +8675,7 @@ exports[`TreeView > should render 1`] = `
             data-type="string"
             role="presentation"
           >
-            
+            "strawberry"
           </div>
            
           <div
@@ -8981,7 +8987,7 @@ exports[`TreeView > should render with almost all props defined 1`] = `
                         data-type="undefined"
                         role="presentation"
                       >
-                        
+                        undefined
                       </div>
                        
                       <div
@@ -9026,7 +9032,7 @@ exports[`TreeView > should render with almost all props defined 1`] = `
                         data-type="null"
                         role="presentation"
                       >
-                        
+                        null
                       </div>
                        
                       <div
@@ -10648,7 +10654,7 @@ exports[`TreeView > should render with almost all props defined 1`] = `
                         data-type="undefined"
                         role="presentation"
                       >
-                        
+                        undefined
                       </div>
                        
                       <div
@@ -10693,7 +10699,7 @@ exports[`TreeView > should render with almost all props defined 1`] = `
                         data-type="null"
                         role="presentation"
                       >
-                        
+                        null
                       </div>
                        
                       <div
diff --git a/packages/svelte-tree-view/src/lib/stores/index.ts b/packages/svelte-tree-view/src/lib/stores/index.ts
index ef5d5f9..d261522 100644
--- a/packages/svelte-tree-view/src/lib/stores/index.ts
+++ b/packages/svelte-tree-view/src/lib/stores/index.ts
@@ -1,10 +1,10 @@
 import type { PropsStore } from './props'
 import type { RootElementStore } from './root-element'
-import type { TreeStore } from './tree'
+import type { TreeStore } from './tree.svelte'
 
 export { createPropsStore } from './props'
 export { createRootElementStore } from './root-element'
-export { createTreeStore } from './tree'
+export { createTreeStore } from './tree.svelte'
 
 export interface Stores {
   propsStore: PropsStore
diff --git a/packages/svelte-tree-view/src/lib/stores/props.ts b/packages/svelte-tree-view/src/lib/stores/props.ts
index 38b22fc..44c7672 100644
--- a/packages/svelte-tree-view/src/lib/stores/props.ts
+++ b/packages/svelte-tree-view/src/lib/stores/props.ts
@@ -34,6 +34,8 @@ export const createPropsStore = (initialProps: Omit<TreeViewProps, 'data'>) => {
           return `${val.toISOString()}`
         case 'string':
           return `"${val}"`
+        case 'number':
+          return val
         case 'boolean':
           return val ? 'true' : 'false'
         case 'symbol':
diff --git a/packages/svelte-tree-view/src/lib/stores/tree.ts b/packages/svelte-tree-view/src/lib/stores/tree.svelte.ts
similarity index 57%
rename from packages/svelte-tree-view/src/lib/stores/tree.ts
rename to packages/svelte-tree-view/src/lib/stores/tree.svelte.ts
index eedfdf4..b460fc4 100644
--- a/packages/svelte-tree-view/src/lib/stores/tree.ts
+++ b/packages/svelte-tree-view/src/lib/stores/tree.svelte.ts
@@ -1,15 +1,15 @@
 import { get, writable } from 'svelte/store'
 
-import { createNode, recomputeTree, recurseObjectProperties } from '../tree-utils'
+import { createNode, recomputeTree, recurseObjectProperties } from '../tree-utils.svelte'
 import type { TreeNode, TreeRecursionOpts } from '../types'
 import type { PropsStore } from './props'
 
 export type TreeStore = ReturnType<typeof createTreeStore>
 
 export const createTreeStore = (propsStore: PropsStore) => {
-  const defaultRootNode = createNode(0, 'root', [], 0, null)
+  const [defaultRootNode] = createNode(0, 'root', [], 0, null, {})
   const tree = writable<TreeNode>(defaultRootNode)
-  const treeMap = writable<Record<string, TreeNode>>({})
+  const treeMap = $state<Record<string, TreeNode>>({})
   const iteratedValues = writable<Map<any, TreeNode>>(new Map())
 
   return {
@@ -17,82 +17,58 @@ export const createTreeStore = (propsStore: PropsStore) => {
     treeMap,
     defaultRootNode,
 
-    init(
-      newTree: TreeNode | null,
-      newTreeMap: Record<string, TreeNode>,
-      iterated: Map<any, TreeNode>
-    ) {
-      if (newTree) {
-        tree.set(newTree)
-      } else {
-        tree.set(defaultRootNode)
-      }
-      treeMap.set(newTreeMap)
-      iteratedValues.set(iterated)
-    },
-
     update(data: unknown, recursionOpts: TreeRecursionOpts<any>, recomputeExpandNode: boolean) {
-      const oldTreeMap = get(treeMap)
-      const recomputed = recomputeTree(data, oldTreeMap, recursionOpts, recomputeExpandNode)
+      const recomputed = recomputeTree(data, treeMap, recursionOpts, recomputeExpandNode)
       if (recomputed.tree) {
         tree.set(recomputed.tree)
       } else {
         tree.set(defaultRootNode)
       }
-      treeMap.set(recomputed.treeMap)
       iteratedValues.set(recomputed.iteratedValues)
-      // console.log('recomputed', recomputed.treeMap)
-      // treeStore.init(tree, treeMap, iteratedValues)
-    },
-
-    getNode(id: string) {
-      return get(treeMap)[id]
+      get(propsStore.props).onUpdate?.(treeMap)
     },
 
     toggleCollapse(id: string) {
-      const node = get(treeMap)[id]
+      const node = treeMap[id]
       if (!node) {
         console.warn(`Attempted to collapse non-existent node: ${id}`)
         return
       }
-      const updatedNode = { ...node, collapsed: !node.collapsed }
-      treeMap.update(m => ({ ...m, [node.id]: updatedNode }))
+      node.collapsed = !node.collapsed
       const recursionOpts = get(propsStore.recursionOpts)
       if (recursionOpts) {
-        this.expandNodeChildren(updatedNode, recursionOpts)
+        this.expandNodeChildren(node, recursionOpts)
+      } else {
+        get(propsStore.props).onUpdate?.(treeMap)
       }
     },
 
     expandNodeChildren(node: TreeNode, recursionOpts: TreeRecursionOpts) {
-      const parent = this.getNode(node?.parentId || '') || null
+      const oldTreeMap = treeMap
+      const parent = oldTreeMap[node?.parentId || ''] || null
       if (!parent) {
         // Only root node has no parent and it should not be expandable
         throw Error('No parent in expandNodeChildren for node: ' + node)
       }
-      const newTreeMap: Record<string, TreeNode> = { ...get(treeMap) }
-      const oldTreeMap = get(treeMap)
       const previouslyIterated = get(iteratedValues)
       const nodeWithUpdatedChildren = recurseObjectProperties(
         node.index,
         node.key,
-        node.value,
+        node.getValue(),
         node.depth,
         !node.collapsed, // Ensure that when uncollapsed the node's children are always recursed
         parent,
-        newTreeMap,
-        oldTreeMap,
+        treeMap,
+        new Set(),
         previouslyIterated,
         false, // Never recompute shouldExpandNode since it may override the collapsing of this node
         recursionOpts
       )
       if (!nodeWithUpdatedChildren) return
-      parent.children = parent.children.map(c =>
-        c.id === nodeWithUpdatedChildren.id ? nodeWithUpdatedChildren : c
-      )
-      newTreeMap[nodeWithUpdatedChildren.id] = nodeWithUpdatedChildren
-      newTreeMap[parent.id] = parent
-      treeMap.set(newTreeMap)
+      treeMap[nodeWithUpdatedChildren.id] = nodeWithUpdatedChildren
+      treeMap[parent.id] = parent
       iteratedValues.set(previouslyIterated)
+      get(propsStore.props).onUpdate?.(treeMap)
     },
 
     expandAllNodesToNode(id: string) {
@@ -101,14 +77,14 @@ export const createTreeStore = (propsStore: PropsStore) => {
         node?: TreeNode | null
       ) {
         if (!node) return
-        updated[node.id] = { ...node, collapsed: false }
+        updated[node.id]!.collapsed = false
         if (node.parentId) {
           recurseNodeUpwards(updated, updated[node.parentId])
         }
       }
-      const updated = { ...get(treeMap) }
+      const updated = treeMap
       recurseNodeUpwards(updated, updated[id])
-      treeMap.set(updated)
+      get(propsStore.props).onUpdate?.(updated)
     }
   }
 }
diff --git a/packages/svelte-tree-view/src/lib/tree-utils.ts b/packages/svelte-tree-view/src/lib/tree-utils.svelte.ts
similarity index 77%
rename from packages/svelte-tree-view/src/lib/tree-utils.ts
rename to packages/svelte-tree-view/src/lib/tree-utils.svelte.ts
index 5b2189b..f2d5b9d 100644
--- a/packages/svelte-tree-view/src/lib/tree-utils.ts
+++ b/packages/svelte-tree-view/src/lib/tree-utils.svelte.ts
@@ -5,14 +5,26 @@ export function createNode(
   key: string,
   value: any,
   depth: number,
-  parent: TreeNode | null
-): TreeNode {
+  parent: TreeNode | null,
+  treeMap: Record<string, TreeNode>
+): [TreeNode, TreeNode | undefined] {
   const path = parent ? [...parent.path, index] : []
-  return {
-    id: `[${path.join(',')}]`,
+  const id = `[${path.join(',')}]`
+  const oldNode = treeMap[id]
+  if (oldNode) {
+    oldNode.key = key
+    oldNode.getValue = () => value
+    oldNode.depth = depth
+    oldNode.type = getValueType(value)
+    oldNode.circularOfId = null
+    oldNode.children = []
+    return [oldNode, oldNode]
+  }
+  const node = $state({
+    id,
     index,
     key,
-    value,
+    getValue: () => value,
     depth,
     collapsed: true,
     type: getValueType(value),
@@ -20,7 +32,8 @@ export function createNode(
     parentId: parent ? parent.id : null,
     circularOfId: null,
     children: []
-  }
+  })
+  return [node, oldNode]
 }
 
 export function getValueType(value: any): ValueType {
@@ -114,12 +127,12 @@ function shouldRecurseChildren(
   } else if (opts.isCircularNode) {
     return opts.isCircularNode(node, iteratedValues)
   } else if (node.type === 'object' || node.type === 'array') {
-    const existingNodeWithValue = iteratedValues.get(node.value)
+    const existingNodeWithValue = iteratedValues.get(node.getValue())
     if (existingNodeWithValue && node.id !== existingNodeWithValue.id) {
       node.circularOfId = existingNodeWithValue.id
       return false
     }
-    iteratedValues.set(node.value, node)
+    iteratedValues.set(node.getValue(), node)
   }
   return true
 }
@@ -132,7 +145,7 @@ export function recurseObjectProperties(
   ensureNotCollapsed: boolean,
   parent: TreeNode | null,
   treeMap: Record<string, TreeNode>,
-  oldTreeMap: Record<string, TreeNode>,
+  oldIds: Set<string>,
   iteratedValues: Map<any, TreeNode>,
   recomputeExpandNode: boolean,
   opts: TreeRecursionOpts
@@ -140,8 +153,7 @@ export function recurseObjectProperties(
   if (opts.omitKeys?.includes(key) || (opts.maxDepth && depth > opts.maxDepth)) {
     return null
   }
-  const node = createNode(index, key, value, depth, parent)
-  const oldNode = oldTreeMap[node.id]
+  const [node, oldNode] = createNode(index, key, value, depth, parent, treeMap)
   if (ensureNotCollapsed) {
     // Used to ensure that either root node is always uncollapsed or when uncollapsing new nodes
     // with expandNodeChildren the node children are recursed (if applicable) with mapChildren
@@ -155,27 +167,34 @@ export function recurseObjectProperties(
   }
 
   treeMap[node.id] = node
+  oldIds.delete(node.id)
 
   if (shouldRecurseChildren(node, parent, iteratedValues, opts)) {
     const mappedChildren = opts.mapChildren && opts.mapChildren(value, getValueType(value), node)
     const children = mappedChildren ?? getChildren(value, getValueType(value))
-    node.children = children
-      .map(([key, val], idx) =>
-        recurseObjectProperties(
-          idx,
-          key,
-          val,
-          depth + 1,
-          false,
-          node,
-          treeMap,
-          oldTreeMap,
-          iteratedValues,
-          recomputeExpandNode,
-          opts
-        )
+    const ids: string[] = []
+    for (let i = 0; i < children.length; i += 1) {
+      const [key, val] = children[i]
+      const child = recurseObjectProperties(
+        i,
+        key,
+        val,
+        depth + 1,
+        false,
+        node,
+        treeMap,
+        oldIds,
+        iteratedValues,
+        recomputeExpandNode,
+        opts
       )
-      .filter(n => n !== null) as TreeNode[]
+      if (child) {
+        ids.push(child.id)
+      } else {
+        console.error(`recurseObjectProperties produced unexpected null TreeNode for parent`, node)
+      }
+    }
+    node.children = ids
   }
 
   return node
@@ -187,7 +206,7 @@ export function recomputeTree(
   recursionOpts: TreeRecursionOpts,
   recomputeExpandNode: boolean
 ) {
-  const treeMap = {}
+  const oldIds = new Set(Object.keys(oldTreeMap))
   const iteratedValues = new Map<any, TreeNode>()
   const newTree = recurseObjectProperties(
     -1,
@@ -196,11 +215,14 @@ export function recomputeTree(
     0,
     true,
     null,
-    treeMap,
     oldTreeMap,
+    oldIds,
     iteratedValues,
     recomputeExpandNode,
     recursionOpts
   )
-  return { treeMap, tree: newTree, iteratedValues }
+  for (const id of oldIds) {
+    delete oldTreeMap[id]
+  }
+  return { tree: newTree, iteratedValues }
 }
diff --git a/packages/svelte-tree-view/src/lib/types.ts b/packages/svelte-tree-view/src/lib/types.ts
index 0408b32..ef9dfba 100644
--- a/packages/svelte-tree-view/src/lib/types.ts
+++ b/packages/svelte-tree-view/src/lib/types.ts
@@ -33,7 +33,7 @@ export interface TreeNode<T = any> {
   /**
    * The value mapped to this key
    */
-  value: T
+  getValue: () => T
   depth: number
   collapsed: boolean
   type: ValueType
@@ -43,7 +43,7 @@ export interface TreeNode<T = any> {
    * Circularity is checked by object identity to prevent recursing the same values again
    */
   circularOfId: string | null
-  children: TreeNode<T>[]
+  children: string[]
 }
 
 export interface Base16Theme {
@@ -179,6 +179,7 @@ export interface TreeViewProps<T = any> {
   showLogButton?: boolean
   showCopyButton?: boolean
   recursionOpts?: TreeRecursionOpts<T>
+  onUpdate?: (newMap: Record<string, TreeNode>) => void
   /**
    * For custom formatting of the value string. Returning undefined will pass the value to the default formatter
    * @param val