fix: fix the race condition resulting in switching between views not …

…working properly

frontend/src/hooks/useUrlQueryData.ts

@@ -1,7 +1,8 @@
-import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback, useMemo } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
+import useUrlQuery from './useUrlQuery';
+
 const useUrlQueryData = <T>(
 	queryKey: string,
 	defaultData?: T,
@@ -10,7 +11,7 @@ const useUrlQueryData = <T>(
 	const location = useLocation();
 	const urlQuery = useUrlQuery();
 
-	const query = useMemo(() => urlQuery.get(queryKey), [queryKey, urlQuery]);
+	const query = useMemo(() => urlQuery.get(queryKey), [urlQuery, queryKey]);
 
 	const queryData: T = useMemo(() => (query ? JSON.parse(query) : defaultData), [
 		query,
@@ -21,11 +22,17 @@ const useUrlQueryData = <T>(
 		(newQueryData: T): void => {
 			const newQuery = JSON.stringify(newQueryData);
 
-			urlQuery.set(queryKey, newQuery);
-			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			// Create a new URLSearchParams to get the latest URL state
+			const currentUrlQuery = new URLSearchParams(window.location.search);
+
+			// Update the query parameter
+			currentUrlQuery.set(queryKey, newQuery);
+
+			// Generate the new URL with updated parameters
+			const generatedUrl = `${location.pathname}?${currentUrlQuery.toString()}`;
 			history.replace(generatedUrl);
 		},
-		[history, location, urlQuery, queryKey],
+		[history, location.pathname, queryKey],
 	);
 
 	return {