diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
index 5ce7b8151..5ba08d263 100644
--- a/src/components/Banner/index.tsx
+++ b/src/components/Banner/index.tsx
@@ -46,14 +46,22 @@ function Banner({
   const [isCollapsing, setIsCollapsing] = useState<boolean>(false)
   const [hasCollapsed, setHasCollapsed] = useState<boolean>(false)
 
+  useEffect(() => {
+    // Reset visibility/height when isCollapsible or isClosable change
+    setIsHidden(false)
+    setIsCollapsed(false)
+    setIsCollapsing(false)
+    setHasCollapsed(false)
+  }, [isCollapsible, isClosable])
+
   const enterHover = (): void => {
-    if (!isHidden && isCollapsed && !isCollapsing) {
+    if (isCollapsible && !isHidden && isCollapsed && !isCollapsing) {
       setIsCollapsed(false)
     }
     setIsCollapsing(false)
   }
   const leaveHover = (): void => {
-    if (!isHidden && hasCollapsed) {
+    if (isCollapsible && !isHidden && hasCollapsed) {
       setIsCollapsed(true)
     }
   }