From c5af4e691941e5179a137519aad3f1064548b7a1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 23 Oct 2024 19:42:26 +0000
Subject: [PATCH] fix: data source picker remount multiple times (#1192)

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
(cherry picked from commit 37ac7d246601b701cd77dab282290658355dffe4)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../DataSourceThreatAlertsCard.tsx                     | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/public/components/DataSourceThreatAlertsCard/DataSourceThreatAlertsCard.tsx b/public/components/DataSourceThreatAlertsCard/DataSourceThreatAlertsCard.tsx
index c93233b3..e55bb39a 100644
--- a/public/components/DataSourceThreatAlertsCard/DataSourceThreatAlertsCard.tsx
+++ b/public/components/DataSourceThreatAlertsCard/DataSourceThreatAlertsCard.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   EuiBasicTable,
   EuiBasicTableColumn,
@@ -46,7 +46,13 @@ export const DataSourceThreatAlertsCard: React.FC<DataSourceAlertsCardProps> = (
   getDataSourceMenu,
   detectorService,
 }) => {
-  const DataSourceSelector = getDataSourceMenu?.();
+  const DataSourceSelector = useMemo(() => {
+    if (getDataSourceMenu) {
+      return getDataSourceMenu();
+    }
+
+    return null;
+  }, [getDataSourceMenu]);
   const notifications = getNotifications();
   const [loading, setLoading] = useState(false);
   const [dataSource, setDataSource] = useState<DataSourceOption>({