diff --git a/web/src/components/filter/SearchFilterGroup.tsx b/web/src/components/filter/SearchFilterGroup.tsx
index 54618aefc..c148f92d8 100644
--- a/web/src/components/filter/SearchFilterGroup.tsx
+++ b/web/src/components/filter/SearchFilterGroup.tsx
@@ -430,6 +430,13 @@ function TimeRangeFilterButton({
   const formattedSelectedAfter = useFormattedHour(config, selectedAfterHour);
   const formattedSelectedBefore = useFormattedHour(config, selectedBeforeHour);
 
+  useEffect(() => {
+    setSelectedAfterHour(afterHour);
+    setSelectedBeforeHour(beforeHour);
+    // only refresh when state changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeRange]);
+
   const trigger = (
     <Button
       size="sm"
@@ -558,6 +565,7 @@ function TimeRangeFilterButton({
           onClick={() => {
             setSelectedAfterHour(DEFAULT_TIME_RANGE_AFTER);
             setSelectedBeforeHour(DEFAULT_TIME_RANGE_BEFORE);
+            updateTimeRange(undefined);
           }}
         >
           Reset