diff --git a/src/Portal.tsx b/src/Portal.tsx
index 30f4ff3..ea6ad35 100644
--- a/src/Portal.tsx
+++ b/src/Portal.tsx
@@ -58,12 +58,14 @@ const Portal = React.forwardRef<any, PortalProps>((props, ref) => {
     children,
   } = props;
 
-  const [mergedRender, setMergedRender] = React.useState(open);
+  const [shouldRender, setShouldRender] = React.useState(open);
+
+  const mergedRender = shouldRender || open;
 
   // ====================== Should Render ======================
   React.useEffect(() => {
     if (autoDestroy || open) {
-      setMergedRender(open);
+      setShouldRender(open);
     }
   }, [open, autoDestroy]);
 
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index ede5689..8f1bbb9 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -220,4 +220,33 @@ describe('Portal', () => {
       expect(portalRef.current).toBeFalsy();
     });
   });
+
+  it('first render should ref accessible', () => {
+    let checked = false;
+
+    const Demo = ({ open }: { open?: boolean }) => {
+      const pRef = React.useRef();
+
+      React.useEffect(() => {
+        if (open) {
+          checked = true;
+          expect(pRef.current).toBeTruthy();
+        }
+      }, [open]);
+
+      return (
+        <Portal open={open}>
+          <div>
+            <p ref={pRef} />
+          </div>
+        </Portal>
+      );
+    };
+
+    const { rerender } = render(<Demo />);
+    expect(checked).toBeFalsy();
+
+    rerender(<Demo open />);
+    expect(checked).toBeTruthy();
+  });
 });