diff --git a/x-pack/plugins/apm/public/hooks/useLocalStorage.ts b/x-pack/plugins/apm/public/hooks/useLocalStorage.ts
index dc07b89ec7807..502824135db2a 100644
--- a/x-pack/plugins/apm/public/hooks/useLocalStorage.ts
+++ b/x-pack/plugins/apm/public/hooks/useLocalStorage.ts
@@ -8,28 +8,10 @@
 import { useState, useEffect } from 'react';
 
 export function useLocalStorage<T>(key: string, defaultValue: T) {
-  const [item, setItem] = useState<T>(getFromStorage());
-
-  function getFromStorage() {
-    const storedItem = window.localStorage.getItem(key);
-
-    let toStore: T = defaultValue;
-
-    if (storedItem !== null) {
-      try {
-        toStore = JSON.parse(storedItem) as T;
-      } catch (err) {
-        window.localStorage.removeItem(key);
-        // eslint-disable-next-line no-console
-        console.log(`Unable to decode: ${key}`);
-      }
-    }
-
-    return toStore;
-  }
+  const [item, setItem] = useState<T>(getFromStorage(key, defaultValue));
 
   const updateFromStorage = () => {
-    const storedItem = getFromStorage();
+    const storedItem = getFromStorage(key, defaultValue);
     setItem(storedItem);
   };
 
@@ -51,5 +33,25 @@ export function useLocalStorage<T>(key: string, defaultValue: T) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // item state must be updated with a new key or default value
+  useEffect(() => {
+    setItem(getFromStorage(key, defaultValue));
+  }, [key, defaultValue]);
+
   return [item, saveToStorage] as const;
 }
+
+function getFromStorage<T>(keyName: string, defaultValue: T) {
+  const storedItem = window.localStorage.getItem(keyName);
+
+  if (storedItem !== null) {
+    try {
+      return JSON.parse(storedItem) as T;
+    } catch (err) {
+      window.localStorage.removeItem(keyName);
+      // eslint-disable-next-line no-console
+      console.log(`Unable to decode: ${keyName}`);
+    }
+  }
+  return defaultValue;
+}