[Security Solution] - fixing infinite look on host flyout panel due t…

…o lack of memoization (#204999)

## Summary

This PR fixes [an
issue](elastic/security-team#11424) raised
recently where opening a preview panel for a host of user on top of a
flyout already showing a host or user was getting the UI stuck into an
infinite loop.

While we found a few ways to fix the issue - primarily adding
memoization to the UI components within the HostPanel and UserPanel, the
approach in this PR fixes the issue at a more root level.

Infinite loop behavior


https://github.com/user-attachments/assets/92cb60ad-7801-43ec-a247-8943e091b6a8

Issue fixed


https://github.com/user-attachments/assets/30b30b42-f32e-4c02-9407-9d0f671d7216

This fix should also potentially bring some performance improvement to
all the components that are using the hook (we have a few).

x-pack/solutions/security/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/use_alerts_by_status.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
 
 import { useDispatch } from 'react-redux';
@@ -200,12 +200,17 @@ export const useAlertsByStatus: UseAlertsByStatus = ({
     }
   }, [skip, refetchQuery]);
 
-  useQueryInspector({
-    deleteQuery,
-    inspect: {
+  const inspect = useMemo(
+    () => ({
       dsl: [request],
       response: [response],
-    },
+    }),
+    [request, response]
+  );
+
+  useQueryInspector({
+    deleteQuery,
+    inspect,
     refetch,
     setQuery,
     queryId,