From 0083b7565b7ea9238c08faa9ed8575499578b911 Mon Sep 17 00:00:00 2001
From: Angela Chuang <yi-chun.chuang@elastic.co>
Date: Mon, 2 Oct 2023 11:47:20 +0100
Subject: [PATCH] remove ref

---
 .../components/dashboard_renderer.tsx         | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/dashboards/components/dashboard_renderer.tsx b/x-pack/plugins/security_solution/public/dashboards/components/dashboard_renderer.tsx
index 4240c91401a7e..96d040814ff43 100644
--- a/x-pack/plugins/security_solution/public/dashboards/components/dashboard_renderer.tsx
+++ b/x-pack/plugins/security_solution/public/dashboards/components/dashboard_renderer.tsx
@@ -75,16 +75,11 @@ const DashboardRendererComponent = ({
       }),
     [embeddable, filters, query, timeRange, viewMode]
   );
-  const [dashboardContainerRenderer, setDashboardContainerRenderer] = useState<
-    React.ReactElement | undefined
-  >(undefined);
 
   const refetchByForceRefresh = useCallback(() => {
     dashboardContainer?.forceRefresh();
   }, [dashboardContainer]);
 
-  const wrapperRef = useRef(null);
-
   useEffect(() => {
     dispatch(
       inputsActions.setQuery({
@@ -112,23 +107,25 @@ const DashboardRendererComponent = ({
   /** Dashboard renderer is stored in the state as it's a temporary solution for
    *  https://github.com/elastic/kibana/issues/167751
    **/
+  const [dashboardContainerRenderer, setDashboardContainerRenderer] = useState<
+    React.ReactElement | undefined
+  >(undefined);
+
   useEffect(() => {
-    if (wrapperRef) {
-      setDashboardContainerRenderer(
-        <DashboardContainerRenderer
-          ref={onDashboardContainerLoaded}
-          savedObjectId={savedObjectId}
-          getCreationOptions={getCreationOptions}
-        />
-      );
-    }
+    setDashboardContainerRenderer(
+      <DashboardContainerRenderer
+        ref={onDashboardContainerLoaded}
+        savedObjectId={savedObjectId}
+        getCreationOptions={getCreationOptions}
+      />
+    );
 
     return () => {
       setDashboardContainerRenderer(undefined);
     };
   }, [getCreationOptions, onDashboardContainerLoaded, refetchByForceRefresh, savedObjectId]);
 
-  return canReadDashboard ? <div ref={wrapperRef}>{dashboardContainerRenderer}</div> : null;
+  return canReadDashboard ? <>{dashboardContainerRenderer}</> : null;
 };
 DashboardRendererComponent.displayName = 'DashboardRendererComponent';
 export const DashboardRenderer = React.memo(DashboardRendererComponent);