fix(FR-1401): fix state persistence issue in useDeferredQueryParams hook (#4179)

Resolves #4178 ([FR-1401](https://lablup.atlassian.net/browse/FR-1401))

## Problem

The `useDeferredQueryParams` hook was experiencing a state persistence issue where query parameters set on one page would unexpectedly remain when navigating to another page. This occurred because the global `queryParamsAtom` was shared across all pages without proper cleanup mechanisms.

## Root Cause

- The hook used a global atom (`queryParamsAtom`) to store query parameters
- No cleanup logic existed when components unmounted
- Parameters from previous pages would persist in the global state and affect newly mounted components

## Solution Implemented

Implemented a reference counting mechanism to properly manage shared query parameter keys:

- Added `paramRefCountMap` to track how many components are using each parameter key
- Increment reference count when components mount
- Decrement on unmount and only clean up when the last component using a key unmounts
- This preserves the URL as the Single Source of Truth while preventing state leakage between pages

## Impact

- Fixes unexpected state persistence across page navigation
- Maintains proper state isolation between different pages
- Preserves correct behavior when multiple components share the same query parameter keys

[FR-1401]: https://lablup.atlassian.net/browse/FR-1401?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: yomybaby

react/src/hooks/useDeferredQueryParams.tsx

@@ -1,7 +1,7 @@
 import { atom, useAtomValue, useSetAtom } from 'jotai';
 import { atomWithDefault } from 'jotai/utils';
 import _ from 'lodash';
-import { useRef, useCallback, useMemo } from 'react';
+import { useRef, useCallback, useMemo, useEffect } from 'react';
 import {
   useQueryParams,
   QueryParamConfigMap,
@@ -11,6 +11,9 @@ import {
 
 const queryParamsAtom = atom<Record<string, any>>({});
 
+// Reference counting atom for thread-safe tracking of parameter key usage
+const paramRefCountAtom = atom<Map<string, number>>(new Map());
+
 /**
  * A custom hook that synchronizes URL search parameters with application state while handling React transitions.
  * This hook solves the issue where URL parameter changes within React transitions are not properly reflected
@@ -42,6 +45,51 @@ export function useDeferredQueryParams<QPCMap extends QueryParamConfigMap>(
   paramConfigMap: QPCMap,
 ) {
   const [query, setQuery] = useQueryParams(paramConfigMap);
+  const setSharedQuery = useSetAtom(queryParamsAtom);
+  const setParamRefCount = useSetAtom(paramRefCountAtom);
+
+  const stringifiedParamConfigMap = useMemo(() => {
+    return JSON.stringify(paramConfigMap);
+  }, [paramConfigMap]);
+
+  // Reference counting based cleanup: only remove params when last component unmounts
+  useEffect(() => {
+    const keys = Object.keys(paramConfigMap);
+
+    // Mount: increase reference count for each key
+    setParamRefCount((prev) => {
+      const newMap = new Map(prev);
+      keys.forEach((key) => {
+        newMap.set(key, (newMap.get(key) || 0) + 1);
+      });
+      return newMap;
+    });
+
+    return () => {
+      // Unmount: decrease reference count and cleanup if necessary
+      setParamRefCount((prev) => {
+        const newMap = new Map(prev);
+        keys.forEach((key) => {
+          const currentCount = (newMap.get(key) || 0) - 1;
+
+          if (currentCount <= 0) {
+            // Last component using this key is unmounting, safe to cleanup
+            newMap.delete(key);
+            setSharedQuery((queryPrev) => {
+              const newState = { ...queryPrev };
+              delete newState[key];
+              return newState;
+            });
+          } else {
+            // Other components still using this key
+            newMap.set(key, currentCount);
+          }
+        });
+        return newMap;
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stringifiedParamConfigMap, setParamRefCount, setSharedQuery]);
 
   const isBeforeInitializingRef = useRef(true);
   const selectiveQueryAtom = useMemo(
@@ -67,11 +115,10 @@ export function useDeferredQueryParams<QPCMap extends QueryParamConfigMap>(
       });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(paramConfigMap)],
+    [stringifiedParamConfigMap],
   );
 
   let localQuery = useAtomValue(selectiveQueryAtom);
-  const setSharedQuery = useSetAtom(queryParamsAtom);
 
   const setDeferredQuery = useCallback(
     (