[Security Solution] Fix redux action being fired because of unused react-router value (#217055)

## Summary

This pr fixes a bug with the RouteCapture component, used at a high
level in the security solution component tree, to reflect url changes
into redux. The code previously used the full result of
'react-router-dom' 's useLocation hook as the payload, which contains 4
parameters, pathname, search, hash that we make use of, and a 4th that
was added sometime later by the library that is essentially a random id
generated every time the hook is called, called key. We have never used
this, and it was being inadvertently copied into the redux state, and
also causing some other actions or hooks based listeners to run I think
as well.

Below is the contrived example of going from the home page to an empty
alerts page, and you can see 4 actions in the after, and 5 in the
before, with 1 updating only the key. May reduce more unneeded actions
with more going on in the page, but exactly how many is not known.
Before:

![image](https://github.com/user-attachments/assets/93cc2c5a-56e4-4764-8791-c41879fd5b45)


After:

![image](https://github.com/user-attachments/assets/ebd75055-4e17-497b-bed2-a5fd58c5c92f)


### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

x-pack/solutions/security/plugins/security_solution/common/endpoint/types/index.ts

@@ -50,7 +50,6 @@ export interface AppLocation {
   pathname: string;
   search: string;
   hash: string;
-  key?: string;
   state?:
     | {
         isTabChange?: boolean;

x-pack/solutions/security/plugins/security_solution/public/common/components/endpoint/route_capture.tsx

@@ -6,11 +6,10 @@
  */
 
 import type { PropsWithChildren } from 'react';
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { TimelineId } from '../../../../common/types';
-import type { AppLocation } from '../../../../common/endpoint/types';
 import { timelineActions } from '../../../timelines/store';
 
 /**
@@ -18,16 +17,20 @@ import { timelineActions } from '../../../timelines/store';
  * It dispatches actions when the URL is changed.
  */
 export const RouteCapture = memo<PropsWithChildren<unknown>>(({ children }) => {
-  const location: AppLocation = useLocation();
+  const { pathname, search, hash, state } = useLocation();
   const dispatch = useDispatch();
+  const relevantUrlParams = useMemo(
+    () => ({ pathname, search, hash, state }),
+    [pathname, search, hash, state]
+  );
 
   useEffect(() => {
     dispatch(timelineActions.showTimeline({ id: TimelineId.active, show: false }));
-  }, [dispatch, location.pathname]);
+  }, [dispatch, relevantUrlParams.pathname]);
 
   useEffect(() => {
-    dispatch({ type: 'userChangedUrl', payload: location });
-  });
+    dispatch({ type: 'userChangedUrl', payload: relevantUrlParams });
+  }, [dispatch, relevantUrlParams]);
 
   return <>{children}</>;
 });