diff --git a/src/routes/demos/demoDir/SearchInput.tsx b/src/routes/demos/demoDir/SearchInput.tsx
index fe4486b..6b4c452 100644
--- a/src/routes/demos/demoDir/SearchInput.tsx
+++ b/src/routes/demos/demoDir/SearchInput.tsx
@@ -7,23 +7,25 @@ import { IconSearch } from "@tabler/icons-react";
 import classes from "./SearchInput.module.css";
 
 type SearchInputProps = {
-  initialQuery: string;
-  setDebouncedQuery(newQuery: string): void;
+  query: string;
+  setQuery(newQuery: string): void;
   debounceInterval: number;
 };
 
 export default function SearchInput({
-  initialQuery,
-  setDebouncedQuery,
+  query,
+  setQuery,
   debounceInterval,
 }: SearchInputProps) {
-  const [query, setQuery] = useState(initialQuery);
+  const [rawQuery, setRawQuery] = useState(query);
 
-  const [debouncedQuery] = useDebouncedValue(query, debounceInterval);
+  const [debouncedQuery] = useDebouncedValue(rawQuery, debounceInterval);
 
   useEffect(() => {
-    setDebouncedQuery(debouncedQuery);
-  }, [debouncedQuery]);
+    if (rawQuery != query) {
+      setQuery(debouncedQuery);
+    }
+  }, [setQuery, debouncedQuery, query, rawQuery]);
 
   return (
     <Input
@@ -32,9 +34,9 @@ export default function SearchInput({
       size="sm"
       leftSection={<IconSearch size={18} />}
       classNames={{ input: classes.input, wrapper: classes.wrapper }}
-      value={query}
+      value={rawQuery}
       onChange={(event) => {
-        setQuery(event.currentTarget.value);
+        setRawQuery(event.currentTarget.value);
       }}
     />
   );
diff --git a/src/routes/demos/demoDir/demoDetails/Highlights.tsx b/src/routes/demos/demoDir/demoDetails/Highlights.tsx
index 039c695..b23d69e 100644
--- a/src/routes/demos/demoDir/demoDetails/Highlights.tsx
+++ b/src/routes/demos/demoDir/demoDetails/Highlights.tsx
@@ -193,7 +193,7 @@ export default function HighlightsList({ gameSummary }: TimelineProps) {
   const highlights = useMemo(
     () =>
       filterHighlights(gameSummary.highlights, filters, gameSummary.aliases),
-    [gameSummary.highlights, filters]
+    [gameSummary, filters]
   );
 
   return (
diff --git a/src/routes/demos/demoDir/index.tsx b/src/routes/demos/demoDir/index.tsx
index f8b8c91..8204064 100644
--- a/src/routes/demos/demoDir/index.tsx
+++ b/src/routes/demos/demoDir/index.tsx
@@ -78,8 +78,6 @@ export default () => {
     sortOrder: "descending" as SortOrder,
   });
 
-  console.log(locationState);
-
   const filters: DemoFilter[] = [];
 
   return (
@@ -88,8 +86,8 @@ export default () => {
         <HeaderBar
           center={
             <SearchInput
-              initialQuery={locationState.query}
-              setDebouncedQuery={setLocationState("query")}
+              query={locationState.query}
+              setQuery={setLocationState("query")}
               debounceInterval={500}
             />
           }