diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js
index b773d7d0ed..4b86a99fcb 100644
--- a/components/lib/datatable/ColumnFilter.js
+++ b/components/lib/datatable/ColumnFilter.js
@@ -6,7 +6,7 @@ import { ColumnBase } from '../column/ColumnBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { Dropdown } from '../dropdown/Dropdown';
 import FocusTrap from '../focustrap/FocusTrap';
-import { useMergeProps, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { FilterIcon } from '../icons/filter';
 import { FilterSlashIcon } from '../icons/filterslash';
 import { PlusIcon } from '../icons/plus';
@@ -20,7 +20,7 @@ import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } fr
 export const ColumnFilter = React.memo((props) => {
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
     const overlayRef = React.useRef(null);
-    const overlayId = React.useRef(() => UniqueComponentId());
+    const overlayId = React.useRef(null);
     const iconRef = React.useRef(null);
     const selfClick = React.useRef(false);
     const overlayEventListener = React.useRef(null);
@@ -478,6 +478,12 @@ export const ColumnFilter = React.memo((props) => {
         }
     });
 
+    useMountEffect(() => {
+        if (!overlayId.current) {
+            overlayId.current = UniqueComponentId();
+        }
+    });
+
     useUnmountEffect(() => {
         if (overlayEventListener.current) {
             OverlayService.off('overlay-click', overlayEventListener.current);