diff --git a/README.md b/README.md
index f50b90dc..f1d28a27 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.4.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.4.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
diff --git a/lerna.json b/lerna.json
index a5830df9..6fea4400 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.4.0",
+  "version": "5.4.1",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/package.json b/package.json
index e9ecc32b..f27bd5f4 100644
--- a/package.json
+++ b/package.json
@@ -22,14 +22,14 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.6.0",
-    "@typescript-eslint/parser": "^8.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.12.1",
+    "@typescript-eslint/parser": "^8.12.1",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-unicorn": "^55.0.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-unicorn": "^56.0.0",
     "lerna": "^8.1.8",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3"
diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md
index 3817c711..0dec4d28 100644
--- a/packages/coreui-react/README.md
+++ b/packages/coreui-react/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.4.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.4.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json
index ac389697..e106f5a0 100644
--- a/packages/coreui-react/package.json
+++ b/packages/coreui-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,19 +41,19 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.1.2",
+    "@coreui/coreui": "^5.2.0",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
-    "@types/jest": "^29.5.13",
-    "@types/react": "18.3.8",
-    "@types/react-dom": "^18.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-transition-group": "^4.4.11",
     "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
@@ -62,10 +62,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.22.4",
+    "rollup": "^4.24.2",
     "ts-jest": "^29.2.5",
-    "tslib": "^2.7.0",
-    "typescript": "^5.6.2"
+    "tslib": "^2.8.0",
+    "typescript": "^5.6.3"
   },
   "peerDependencies": {
     "react": ">=17",
diff --git a/packages/coreui-react/src/components/list-group/CListGroup.tsx b/packages/coreui-react/src/components/list-group/CListGroup.tsx
index becc64dd..1dce9007 100644
--- a/packages/coreui-react/src/components/list-group/CListGroup.tsx
+++ b/packages/coreui-react/src/components/list-group/CListGroup.tsx
@@ -32,7 +32,7 @@ export interface CListGroupProps extends HTMLAttributes<HTMLDivElement | HTMLULi
 export const CListGroup: PolymorphicRefForwardingComponent<'ul', CListGroupProps> = forwardRef<
   HTMLDivElement | HTMLUListElement,
   CListGroupProps
->(({ children, as: Component = 'ul', className, flush, layout }, ref) => {
+>(({ children, as: Component = 'ul', className, flush, layout, ...rest }, ref) => {
   return (
     <Component
       className={classNames(
@@ -43,6 +43,7 @@ export const CListGroup: PolymorphicRefForwardingComponent<'ul', CListGroupProps
         },
         className,
       )}
+      {...rest}
       ref={ref}
     >
       {children}
diff --git a/packages/coreui-react/src/components/nav/CNavGroup.tsx b/packages/coreui-react/src/components/nav/CNavGroup.tsx
index 776bf104..5a7d891e 100644
--- a/packages/coreui-react/src/components/nav/CNavGroup.tsx
+++ b/packages/coreui-react/src/components/nav/CNavGroup.tsx
@@ -58,7 +58,7 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   HTMLDivElement | HTMLLIElement,
   CNavGroupProps
 >(({ children, as: Component = 'li', className, compact, idx, toggler, visible, ...rest }, ref) => {
-  const [height, setHeight] = useState<number | string>()
+  const [height, setHeight] = useState<number | string>(0)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const navItemsRef = useRef<any>(null)
 
diff --git a/packages/coreui-react/src/components/popover/CPopover.tsx b/packages/coreui-react/src/components/popover/CPopover.tsx
index 1ed3393d..d6210f73 100644
--- a/packages/coreui-react/src/components/popover/CPopover.tsx
+++ b/packages/coreui-react/src/components/popover/CPopover.tsx
@@ -1,4 +1,12 @@
-import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -97,12 +105,13 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     const popoverRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
     const forkedRef = useForkedRef(ref, popoverRef)
-    const uID = useRef(`popover${Math.floor(Math.random() * 1_000_000)}`)
 
-    const { initPopper, destroyPopper } = usePopper()
+    const id = `popover${useId()}`
     const [mounted, setMounted] = useState(false)
     const [_visible, setVisible] = useState(visible)
 
+    const { initPopper, destroyPopper } = usePopper()
+
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
 
     const popperConfig = {
@@ -130,77 +139,87 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     }
 
     useEffect(() => {
-      setVisible(visible)
+      if (visible) {
+        handleShow()
+        return
+      }
+
+      handleHide()
     }, [visible])
 
     useEffect(() => {
-      if (_visible) {
-        setMounted(true)
-
-        if (popoverRef.current) {
-          popoverRef.current.classList.remove('fade', 'show')
-          destroyPopper()
-        }
-
+      if (mounted && togglerRef.current && popoverRef.current) {
+        initPopper(togglerRef.current, popoverRef.current, popperConfig)
         setTimeout(() => {
-          if (togglerRef.current && popoverRef.current) {
-            if (animation) {
-              popoverRef.current.classList.add('fade')
-            }
-
-            initPopper(togglerRef.current, popoverRef.current, popperConfig)
-            popoverRef.current.style.removeProperty('display')
-            popoverRef.current.classList.add('show')
-            onShow && onShow()
-          }
+          setVisible(true)
         }, _delay.show)
+
+        return
       }
 
-      return () => {
-        if (popoverRef.current) {
-          popoverRef.current.classList.remove('show')
-          onHide && onHide()
-          executeAfterTransition(() => {
-            if (popoverRef.current) {
-              popoverRef.current.style.display = 'none'
-            }
-
-            destroyPopper()
-            setMounted(false)
-          }, popoverRef.current)
-        }
+      if (!mounted && togglerRef.current && popoverRef.current) {
+        destroyPopper()
+      }
+    }, [mounted])
+
+    useEffect(() => {
+      if (!_visible && togglerRef.current && popoverRef.current) {
+        executeAfterTransition(() => {
+          setMounted(false)
+        }, popoverRef.current)
       }
     }, [_visible])
 
+    const handleShow = () => {
+      setMounted(true)
+      if (onShow) {
+        onShow()
+      }
+    }
+
+    const handleHide = () => {
+      setTimeout(() => {
+        setVisible(false)
+        if (onHide) {
+          onHide()
+        }
+      }, _delay.hide)
+    }
+
     return (
       <>
         {React.cloneElement(children as React.ReactElement<any>, {
           ...(_visible && {
-            'aria-describedby': uID.current,
+            'aria-describedby': id,
           }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => setVisible(!_visible),
+            onClick: () => (_visible ? handleHide() : handleShow()),
           }),
           ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => setVisible(true),
-            onBlur: () => setVisible(false),
+            onFocus: () => handleShow(),
+            onBlur: () => handleHide(),
           }),
           ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => setVisible(true),
-            onMouseLeave: () => setVisible(false),
+            onMouseEnter: () => handleShow(),
+            onMouseLeave: () => handleHide(),
           }),
         })}
         <CConditionalPortal container={container} portal={true}>
           {mounted && (
             <div
-              className={classNames('popover', 'bs-popover-auto', className)}
-              id={uID.current}
+              className={classNames(
+                'popover',
+                'bs-popover-auto',
+                {
+                  fade: animation,
+                  show: _visible,
+                },
+                className,
+              )}
+              id={id}
               ref={forkedRef}
               role="tooltip"
-              style={{
-                display: 'none',
-              }}
               {...rest}
             >
               <div className="popover-arrow"></div>
diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx
index b971674f..143051c5 100644
--- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx
+++ b/packages/coreui-react/src/components/tooltip/CTooltip.tsx
@@ -1,4 +1,12 @@
-import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -92,12 +100,13 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     const tooltipRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
     const forkedRef = useForkedRef(ref, tooltipRef)
-    const uID = useRef(`tooltip${Math.floor(Math.random() * 1_000_000)}`)
 
-    const { initPopper, destroyPopper, updatePopper } = usePopper()
+    const id = `tooltip${useId()}`
     const [mounted, setMounted] = useState(false)
     const [_visible, setVisible] = useState(visible)
 
+    const { initPopper, destroyPopper, updatePopper } = usePopper()
+
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
 
     const popperConfig = {
@@ -125,48 +134,53 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     }
 
     useEffect(() => {
-      setVisible(visible)
+      if (visible) {
+        handleShow()
+        return
+      }
+
+      handleHide()
     }, [visible])
 
     useEffect(() => {
-      if (_visible) {
-        setMounted(true)
-
-        if (tooltipRef.current) {
-          tooltipRef.current.classList.remove('fade', 'show')
-          destroyPopper()
-        }
-
+      if (mounted && togglerRef.current && tooltipRef.current) {
+        initPopper(togglerRef.current, tooltipRef.current, popperConfig)
         setTimeout(() => {
-          if (togglerRef.current && tooltipRef.current) {
-            if (animation) {
-              tooltipRef.current.classList.add('fade')
-            }
-
-            initPopper(togglerRef.current, tooltipRef.current, popperConfig)
-            tooltipRef.current.style.removeProperty('display')
-            tooltipRef.current.classList.add('show')
-            onShow && onShow()
-          }
+          setVisible(true)
         }, _delay.show)
+
+        return
       }
 
-      return () => {
-        if (tooltipRef.current) {
-          tooltipRef.current.classList.remove('show')
-          onHide && onHide()
-          executeAfterTransition(() => {
-            if (tooltipRef.current) {
-              tooltipRef.current.style.display = 'none'
-            }
-
-            destroyPopper()
-            setMounted(false)
-          }, tooltipRef.current)
-        }
+      if (!mounted && togglerRef.current && tooltipRef.current) {
+        destroyPopper()
+      }
+    }, [mounted])
+
+    useEffect(() => {
+      if (!_visible && togglerRef.current && tooltipRef.current) {
+        executeAfterTransition(() => {
+          setMounted(false)
+        }, tooltipRef.current)
       }
     }, [_visible])
 
+    const handleShow = () => {
+      setMounted(true)
+      if (onShow) {
+        onShow()
+      }
+    }
+
+    const handleHide = () => {
+      setTimeout(() => {
+        setVisible(false)
+        if (onHide) {
+          onHide()
+        }
+      }, _delay.hide)
+    }
+
     useEffect(() => {
       updatePopper()
     }, [content])
@@ -175,31 +189,36 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       <>
         {React.cloneElement(children as React.ReactElement<any>, {
           ...(_visible && {
-            'aria-describedby': uID.current,
+            'aria-describedby': id,
           }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => setVisible(!_visible),
+            onClick: () => (_visible ? handleHide() : handleShow()),
           }),
           ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => setVisible(true),
-            onBlur: () => setVisible(false),
+            onFocus: () => handleShow(),
+            onBlur: () => handleHide(),
           }),
           ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => setVisible(true),
-            onMouseLeave: () => setVisible(false),
+            onMouseEnter: () => handleShow(),
+            onMouseLeave: () => handleHide(),
           }),
         })}
         <CConditionalPortal container={container} portal={true}>
           {mounted && (
             <div
-              className={classNames('tooltip', 'bs-tooltip-auto', className)}
-              id={uID.current}
+              className={classNames(
+                'tooltip',
+                'bs-tooltip-auto',
+                {
+                  fade: animation,
+                  show: _visible,
+                },
+                className,
+              )}
+              id={id}
               ref={forkedRef}
               role="tooltip"
-              style={{
-                display: 'none',
-              }}
               {...rest}
             >
               <div className="tooltip-arrow"></div>
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 31890153..664f6d35 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-docs",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "private": true,
   "description": "",
   "homepage": "https://coreui.io/react/",
@@ -25,14 +25,14 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.1.2",
+    "@coreui/coreui": "^5.2.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.3.0",
     "@coreui/react-chartjs": "^3.0.0",
     "@coreui/utils": "^2.0.2",
-    "@docsearch/css": "^3.6.1",
-    "@mdx-js/mdx": "^3.0.1",
-    "@mdx-js/react": "^3.0.1",
+    "@docsearch/css": "^3.6.2",
+    "@mdx-js/mdx": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
     "@types/react-helmet": "^6.1.11",
     "gatsby": "^5.13.7",
     "gatsby-plugin-google-tagmanager": "^5.13.1",
@@ -58,7 +58,7 @@
     "react-helmet": "^6.1.0",
     "react-imask": "^7.6.1",
     "rimraf": "^6.0.1",
-    "sass": "^1.79.3"
+    "sass": "^1.80.4"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5"