diff --git a/src/pages/[projectSlug]/index.tsx b/src/pages/[projectSlug]/index.tsx
index bd46322f7..9471824a9 100644
--- a/src/pages/[projectSlug]/index.tsx
+++ b/src/pages/[projectSlug]/index.tsx
@@ -1,6 +1,6 @@
 import { BlitzPage, Routes, useParam, useRouterQuery } from "@blitzjs/next"
 import { useQuery } from "@blitzjs/rpc"
-import { Suspense } from "react"
+import { Suspense, useEffect, useState } from "react"
 import { MapProvider } from "react-map-gl"
 import { CalenderDashboard } from "src/calendar-entries/components"
 import { SuperAdminLogData } from "src/core/components/AdminBox/SuperAdminLogData"
@@ -31,15 +31,19 @@ export const ProjectDashboardWithQuery = () => {
       refetchOnWindowFocus: false,
     },
   )
-
   // We use the URL param `operator` to filter the UI
   // Docs: https://blitzjs.com/docs/route-params-query#use-router-query
   const params = useRouterQuery()
-  const filteredSubsections = params.operator
-    ? subsections.filter(
-        (sec) => typeof params.operator === "string" && sec.operator?.slug === params.operator,
-      )
-    : subsections
+  const [filteredSubsections, setFilteredSubsections] = useState(subsections)
+
+  useEffect(() => {
+    const newFilteredSubsections = params.operator
+      ? subsections.filter(
+          (sec) => typeof params.operator === "string" && sec.operator?.slug === params.operator,
+        )
+      : subsections
+    setFilteredSubsections(newFilteredSubsections)
+  }, [params.operator, subsections])
 
   if (!subsections.length) {
     return (
@@ -81,6 +85,7 @@ export const ProjectDashboardWithQuery = () => {
       )}
 
       <OperatorFilterDropdown />
+
       <MapProvider>
         {Boolean(filteredSubsections.length) ? (
           <ProjectMap subsections={filteredSubsections} />