diff --git a/packages/hooks/use-popper-container/index.ts b/packages/hooks/use-popper-container/index.ts
index 2cd910d3bc..d87e0c6170 100644
--- a/packages/hooks/use-popper-container/index.ts
+++ b/packages/hooks/use-popper-container/index.ts
@@ -8,6 +8,13 @@ export const POPPER_CONTAINER_ID = `el-popper-container-${generateId()}`
 
 export const POPPER_CONTAINER_SELECTOR = `#${POPPER_CONTAINER_ID}`
 
+const createContainer = () => {
+  const container = document.createElement('div')
+  container.id = POPPER_CONTAINER_ID
+  document.body.appendChild(container)
+  return container
+}
+
 export const usePopperContainer = () => {
   onBeforeMount(() => {
     if (!isClient) return
@@ -15,11 +22,12 @@ export const usePopperContainer = () => {
     // This is for bypassing the error that when under testing env, we often encounter
     // document.body.innerHTML = '' situation
     // for this we need to disable the caching since it's not really needed
-    if (process.env.NODE_ENV === 'test' || !cachedContainer) {
-      const container = document.createElement('div')
-      container.id = POPPER_CONTAINER_ID
-      document.body.appendChild(container)
-      cachedContainer = container
+    if (
+      process.env.NODE_ENV === 'test' ||
+      !cachedContainer ||
+      !document.body.querySelector(POPPER_CONTAINER_SELECTOR)
+    ) {
+      cachedContainer = createContainer()
     }
   })
 }