diff --git a/packages/grafana-o11y-ds-frontend/src/TemporaryAlert.tsx b/packages/grafana-o11y-ds-frontend/src/TemporaryAlert.tsx
index 3f7b6961e5b..84a09bdee78 100644
--- a/packages/grafana-o11y-ds-frontend/src/TemporaryAlert.tsx
+++ b/packages/grafana-o11y-ds-frontend/src/TemporaryAlert.tsx
@@ -30,22 +30,26 @@ const timeoutMap = {
 export const TemporaryAlert = (props: { severity: AlertVariant; text: string }) => {
   const style = getStyle(useTheme2());
   const [visible, setVisible] = useState(false);
+  const [timer, setTimer] = useState<NodeJS.Timeout>();
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setVisible(false);
-    }, timeoutMap[props.severity]);
-
     return () => {
-      clearTimeout(timer);
+      if (timer) {
+        clearTimeout(timer);
+      }
     };
-  }, [props.severity, visible]);
+  }, [timer]);
 
   useEffect(() => {
     if (props.text !== '') {
       setVisible(true);
-    }
-  }, [props.text]);
 
-  return <Alert className={style} elevated={true} title={props.text} severity={props.severity} />;
+      const timer = setTimeout(() => {
+        setVisible(false);
+      }, timeoutMap[props.severity]);
+      setTimer(timer);
+    }
+  }, [props.severity, props.text]);
+
+  return <>{visible && <Alert className={style} elevated={true} title={props.text} severity={props.severity} />}</>;
 };