diff --git a/CHANGELOG.md b/CHANGELOG.md
index b8cd7b2597..3f22d0556d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `color` prop to `Segment` typings @layershifter ([#1702](https://github.com/stardust-ui/react/pull/1702))
 - Remove `color` prop from `Dialog` typings @layershifter ([#1702](https://github.com/stardust-ui/react/pull/1702))
 - `Loader` uses `Text` component for `label` slot instead of `Box` @layershifter ([#1701](https://github.com/stardust-ui/react/pull/1701))
+- Fix nesting issues with `Dialog` component inside `Popup` @layershifter ([#1706](https://github.com/stardust-ui/react/pull/1706))
 
 ### Documentation
 - Make sidebar categories collapsible @lucivpav ([#1611](https://github.com/stardust-ui/react/pull/1611))
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index 4103220465..cd0abb6cef 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -417,6 +417,15 @@ class Sidebar extends React.Component<any, any> {
         title: { content: 'Popups', as: NavLink, to: '/prototype-popups' },
         public: false,
       },
+      {
+        key: 'nested-popups-and-dialogs',
+        title: {
+          content: 'Nested Popups & Dialogs',
+          as: NavLink,
+          to: '/prototype-nested-popups-and-dialogs',
+        },
+        public: true,
+      },
       {
         key: 'iconviewer',
         title: { content: 'Processed Icons', as: NavLink, to: '/icon-viewer' },
diff --git a/docs/src/prototypes/NestedPopupsAndDialogs/index.tsx b/docs/src/prototypes/NestedPopupsAndDialogs/index.tsx
new file mode 100644
index 0000000000..c5d6c213b9
--- /dev/null
+++ b/docs/src/prototypes/NestedPopupsAndDialogs/index.tsx
@@ -0,0 +1,123 @@
+import { Button, Dialog, Popup } from '@stardust-ui/react'
+import * as React from 'react'
+
+import { ComponentPrototype, PrototypeSection } from 'docs/src/prototypes/Prototypes'
+
+const PopupAndDialog: React.FC = () => (
+  <Popup
+    content={
+      <>
+        <p>
+          This <code>Popup</code> will be kept open after <code>Dialog</code> will be opened.
+        </p>
+        <Dialog
+          cancelButton="Close"
+          header="A dialog"
+          trigger={<Button content="Open a dialog" />}
+        />
+      </>
+    }
+    trigger={<Button content="Open a popup" />}
+  />
+)
+
+const ControlledPopupAndDialog: React.FC = () => {
+  const [dialogOpen, setDialogOpen] = React.useState(false)
+  const [popupOpen, setPopupOpen] = React.useState(false)
+
+  return (
+    <>
+      <Popup
+        content={
+          <>
+            <p>
+              This <code>Popup</code> will be close after <code>Dialog</code> will be opened.
+            </p>
+            <Button
+              content="Open a dialog & close popup"
+              onClick={() => {
+                setPopupOpen(false)
+                setDialogOpen(true)
+              }}
+            />
+          </>
+        }
+        onOpenChange={(e, data) => setPopupOpen(data.open)}
+        open={popupOpen}
+        trigger={<Button content="Open a popup" />}
+      />
+      <Dialog
+        cancelButton="Close"
+        header="A dialog"
+        onCancel={() => setDialogOpen(false)}
+        open={dialogOpen}
+      />
+    </>
+  )
+}
+
+const NestedDialogs: React.FC = () => (
+  <Dialog
+    cancelButton="Close"
+    header="An outer dialog"
+    content={
+      <>
+        <p>
+          This <code>Dialog</code> contains another <code>Dialog</code> inside.
+        </p>
+        <blockquote>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </blockquote>
+
+        <Dialog
+          cancelButton="Close"
+          header="An inner dialog"
+          content={
+            <>
+              <p>
+                This <code>Dialog</code> is nested ヽ(^o^)ノ, if you will on an overlay only this{' '}
+                <code>Dialog</code> will be closed.
+              </p>
+
+              <Popup
+                content="You can have also Popups inside dialogs!"
+                trigger={<Button content="Open a popup" />}
+              />
+            </>
+          }
+          trigger={<Button content="Open a dialog" />}
+        />
+      </>
+    }
+    trigger={<Button content="Open a dialog" />}
+  />
+)
+
+const NestedPopupsAndDialogs: React.FC = () => {
+  return (
+    <PrototypeSection title="Nested Popups & Dialogs">
+      <ComponentPrototype
+        title="A popup with dialog"
+        description="Popup will be kept open after Dialog"
+      >
+        <PopupAndDialog />
+      </ComponentPrototype>
+      <ComponentPrototype
+        title="A closable popup with dialog"
+        description="Popup will be closed once Dialog will be opened"
+      >
+        <ControlledPopupAndDialog />
+      </ComponentPrototype>
+      <ComponentPrototype title="Nested dialogs" description="An example with nested dialogs">
+        <NestedDialogs />
+      </ComponentPrototype>
+    </PrototypeSection>
+  )
+}
+
+export default NestedPopupsAndDialogs
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
index 4009bef50b..3573e5c96b 100644
--- a/docs/src/routes.tsx
+++ b/docs/src/routes.tsx
@@ -38,6 +38,7 @@ import PopupsPrototype from './prototypes/popups'
 import IconViewerPrototype from './prototypes/IconViewer'
 import MenuButtonPrototype from './prototypes/MenuButton'
 import AlertsPrototype from './prototypes/alerts'
+import NestedPopupsAndDialogsPrototype from './prototypes/NestedPopupsAndDialogs'
 
 const Routes = () => (
   <BrowserRouter basename={__BASENAME__}>
@@ -61,6 +62,11 @@ const Routes = () => (
           <Route exact path="/icon-viewer" component={IconViewerPrototype} />
           <Route exact path="/menu-button" component={MenuButtonPrototype} />
           <Route exact path="/prototype-alerts" component={AlertsPrototype} />
+          <Route
+            exact
+            path="/prototype-nested-popups-and-dialogs"
+            component={NestedPopupsAndDialogsPrototype}
+          />
           <Route exact path="/faq" component={FAQ} />
           <Route exact path="/accessibility" component={Accessibility} />
           <Route exact path="/accessibility-behaviors" component={AccessibilityBehaviors} />
diff --git a/e2e/e2eApi.ts b/e2e/e2eApi.ts
index 063c126a54..27c6d61ca3 100644
--- a/e2e/e2eApi.ts
+++ b/e2e/e2eApi.ts
@@ -41,6 +41,13 @@ export class E2EApi {
 
   public clickOn = async (selector: string) => await (await this.getElement(selector)).click()
 
+  public clickOnPosition = async (selector: string, x: number, y: number) => {
+    const elementHandle = await this.getElement(selector)
+    const boundingBox = await elementHandle.boundingBox()
+
+    await this.page.mouse.click(Math.round(boundingBox.x) + x, Math.round(boundingBox.y) + y)
+  }
+
   public textOf = async (selector: string) => {
     const element = await this.getElement(selector)
     return await (await element.getProperty('textContent')).jsonValue()
diff --git a/e2e/tests/dialogInDialog-example.tsx b/e2e/tests/dialogInDialog-example.tsx
new file mode 100644
index 0000000000..69f4bd1bbe
--- /dev/null
+++ b/e2e/tests/dialogInDialog-example.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { Button, Dialog } from '@stardust-ui/react'
+
+export const selectors = {
+  outerClose: 'outer-close',
+  outerHeader: 'outer-header',
+  outerTrigger: 'outer-trigger',
+  outerOverlay: 'outer-overlay',
+
+  innerClose: 'inner-close',
+  innerHeader: 'inner-header',
+  innerTrigger: 'inner-trigger',
+  innerOverlay: 'inner-overlay',
+}
+
+const DialogInPopupExample = () => (
+  <Dialog
+    cancelButton={{ content: 'Close', id: selectors.outerClose }}
+    content={
+      <Dialog
+        cancelButton={{ content: 'Close', id: selectors.innerClose }}
+        header={{ content: 'An inner', id: selectors.innerHeader }}
+        overlay={{ id: selectors.innerOverlay }}
+        trigger={<Button id={selectors.innerTrigger} content="Open a dialog" />}
+      />
+    }
+    header={{ content: 'An outer', id: selectors.outerHeader }}
+    overlay={{ id: selectors.outerOverlay }}
+    trigger={<Button id={selectors.outerTrigger} content="Open a dialog" />}
+  />
+)
+
+export default DialogInPopupExample
diff --git a/e2e/tests/dialogInDialog-test.ts b/e2e/tests/dialogInDialog-test.ts
new file mode 100644
index 0000000000..6f9ae05b22
--- /dev/null
+++ b/e2e/tests/dialogInDialog-test.ts
@@ -0,0 +1,62 @@
+import { selectors } from './dialogInDialog-example'
+
+const outerClose = `#${selectors.outerClose}`
+const outerHeader = `#${selectors.outerHeader}`
+const outerOverlay = `#${selectors.outerOverlay}`
+const outerTrigger = `#${selectors.outerTrigger}`
+const innerClose = `#${selectors.innerClose}`
+const innerHeader = `#${selectors.innerHeader}`
+const innerTrigger = `#${selectors.innerTrigger}`
+const innerOverlay = `#${selectors.innerOverlay}`
+
+// https://github.com/stardust-ui/react/issues/1674
+describe('Dialog in Dialog', () => {
+  beforeEach(async () => {
+    await e2e.gotoTestCase(__filename, outerTrigger)
+  })
+
+  it('An outer "Dialog" should be open after inner "Dialog" will be opened', async () => {
+    await e2e.clickOn(outerTrigger)
+    expect(await e2e.exists(outerHeader)).toBe(true)
+
+    await e2e.clickOn(innerTrigger)
+    expect(await e2e.exists(outerHeader)).toBe(true)
+    expect(await e2e.exists(innerHeader)).toBe(true)
+  })
+
+  it('A click inside inner "Dialog" should not close dialogs', async () => {
+    await e2e.clickOn(outerTrigger)
+    await e2e.clickOn(innerTrigger)
+    await e2e.clickOn(innerHeader)
+
+    expect(await e2e.exists(outerHeader)).toBe(true)
+    expect(await e2e.exists(innerHeader)).toBe(true)
+  })
+
+  it('A click on overlay should close only the last opened "Dialog"', async () => {
+    await e2e.clickOn(outerTrigger)
+    await e2e.clickOn(innerTrigger)
+
+    await e2e.clickOnPosition(innerOverlay, 0, 0)
+
+    expect(await e2e.exists(outerHeader)).toBe(true)
+    expect(await e2e.exists(innerHeader)).toBe(false)
+
+    await e2e.clickOnPosition(outerOverlay, 0, 0)
+    expect(await e2e.exists(outerHeader)).toBe(false)
+    expect(await e2e.exists(innerHeader)).toBe(false)
+  })
+
+  it('A click on cancel button should close only matching "Dialog"', async () => {
+    await e2e.clickOn(outerTrigger)
+    await e2e.clickOn(innerTrigger)
+
+    await e2e.clickOn(innerClose)
+    expect(await e2e.exists(outerHeader)).toBe(true)
+    expect(await e2e.exists(innerHeader)).toBe(false)
+
+    await e2e.clickOn(outerClose)
+    expect(await e2e.exists(outerHeader)).toBe(false)
+    expect(await e2e.exists(innerHeader)).toBe(false)
+  })
+})
diff --git a/e2e/tests/dialogInPopup-example.tsx b/e2e/tests/dialogInPopup-example.tsx
new file mode 100644
index 0000000000..9426385c98
--- /dev/null
+++ b/e2e/tests/dialogInPopup-example.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { Button, Dialog, Popup } from '@stardust-ui/react'
+
+export const selectors = {
+  dialogCancel: 'dialog-cancel',
+  dialogHeader: Dialog.slotClassNames.header,
+  dialogOverlay: Dialog.slotClassNames.overlay,
+  dialogTrigger: 'dialog-trigger',
+  popupContent: Popup.Content.className,
+  popupTrigger: 'popup-trigger',
+}
+
+const DialogInPopupExample = () => (
+  <Popup
+    content={
+      <Dialog
+        cancelButton={{ content: 'Close', id: selectors.dialogCancel }}
+        header="A dialog"
+        trigger={<Button id={selectors.dialogTrigger} content="Open a dialog" />}
+      />
+    }
+    trigger={<Button id={selectors.popupTrigger} content="Open a popup" />}
+  />
+)
+
+export default DialogInPopupExample
diff --git a/e2e/tests/dialogInPopup-test.ts b/e2e/tests/dialogInPopup-test.ts
new file mode 100644
index 0000000000..ba87eaa0aa
--- /dev/null
+++ b/e2e/tests/dialogInPopup-test.ts
@@ -0,0 +1,51 @@
+import { selectors } from './dialogInPopup-example'
+
+const dialogCancel = `#${selectors.dialogCancel}`
+const dialogHeader = `.${selectors.dialogHeader}`
+const dialogOverlay = `.${selectors.dialogOverlay}`
+const dialogTrigger = `#${selectors.dialogTrigger}`
+const popupContent = `.${selectors.popupContent}`
+const popupTrigger = `#${selectors.popupTrigger}`
+
+// https://github.com/stardust-ui/react/issues/1674
+describe('Dialog in Popup', () => {
+  beforeEach(async () => {
+    await e2e.gotoTestCase(__filename, popupTrigger)
+  })
+
+  it('"Popup" should be open after "Dialog" will be opened', async () => {
+    await e2e.clickOn(popupTrigger)
+    expect(await e2e.exists(popupContent)).toBe(true)
+
+    await e2e.clickOn(dialogTrigger)
+    expect(await e2e.exists(popupContent)).toBe(true)
+    expect(await e2e.exists(dialogHeader)).toBe(true)
+  })
+
+  it('"Popup" should be open after "Dialog" will be closed', async () => {
+    await e2e.clickOn(popupTrigger)
+    await e2e.clickOn(dialogTrigger)
+    await e2e.clickOn(dialogCancel)
+
+    expect(await e2e.exists(popupContent)).toBe(true)
+    expect(await e2e.exists(dialogHeader)).toBe(false)
+  })
+
+  it('"Popup" and "Dialog" will be kept open on a click inside "Dialog"', async () => {
+    await e2e.clickOn(popupTrigger)
+    await e2e.clickOn(dialogTrigger)
+    await e2e.clickOn(dialogHeader)
+
+    expect(await e2e.exists(popupContent)).toBe(true)
+    expect(await e2e.exists(dialogHeader)).toBe(true)
+  })
+
+  it('"Popup" will be kept open on a click inside "Dialog" overlay', async () => {
+    await e2e.clickOn(popupTrigger)
+    await e2e.clickOn(dialogTrigger)
+    await e2e.clickOnPosition(dialogOverlay, 0, 0)
+
+    expect(await e2e.exists(popupContent)).toBe(true)
+    expect(await e2e.exists(dialogHeader)).toBe(false)
+  })
+})
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
new file mode 100644
index 0000000000..0721d84ed5
--- /dev/null
+++ b/e2e/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../build/tsconfig.common.json",
+  "compilerOptions": {
+    "module": "esnext"
+  },
+  "include": ["../packages/react/src", "../e2e", "../types"]
+}
diff --git a/packages/react-component-nesting-registry/src/types.ts b/packages/react-component-nesting-registry/src/types.ts
index e7729f9a52..ea176e1a71 100644
--- a/packages/react-component-nesting-registry/src/types.ts
+++ b/packages/react-component-nesting-registry/src/types.ts
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 export type GetContextRefs = (needleRef: NodeRef) => NodeRef[]
 export type GetRefs = () => NodeRef[]
-export type NodeRef<T extends Node = Node> = React.RefObject<T>
+export type NodeRef<T extends Node = Node> = React.MutableRefObject<T>
 
 export type NestingContextValue = {
   getContextRefs: GetContextRefs
diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx
index 781928bb19..127e41cbc2 100644
--- a/packages/react/src/components/Dialog/Dialog.tsx
+++ b/packages/react/src/components/Dialog/Dialog.tsx
@@ -1,3 +1,5 @@
+import { Unstable_NestingAuto } from '@stardust-ui/react-component-nesting-registry'
+import { documentRef, EventListener } from '@stardust-ui/react-component-event-listener'
 import { Ref } from '@stardust-ui/react-component-ref'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as _ from 'lodash'
@@ -20,13 +22,14 @@ import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs }
 import Button, { ButtonProps } from '../Button/Button'
 import Box, { BoxProps } from '../Box/Box'
 import Header, { HeaderProps } from '../Header/Header'
-import Portal from '../Portal/Portal'
+import Portal, { TriggerAccessibility } from '../Portal/Portal'
 import Flex from '../Flex/Flex'
 
 export interface DialogSlotClassNames {
   header: string
   headerAction: string
   content: string
+  overlay: string
 }
 
 export interface DialogProps
@@ -137,7 +140,8 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
     },
     close: e => this.handleDialogCancel(e),
   }
-  contentRef = React.createRef<HTMLElement>()
+  contentRef = React.createRef<HTMLElement>() as React.MutableRefObject<HTMLElement>
+  overlayRef = React.createRef<HTMLElement>() as React.MutableRefObject<HTMLElement>
   triggerRef = React.createRef<HTMLElement>()
 
   getInitialAutoControlledState(): DialogState {
@@ -185,16 +189,18 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
     },
   })
 
-  handleOverlayOverrides = (content: JSX.Element) => (predefinedProps: BoxProps) => ({
-    content,
-    onClick: (e: React.SyntheticEvent, overlayProps: BoxProps) => {
-      _.invoke(predefinedProps, 'onClick', e, overlayProps)
+  handleOverlayClick = (e: MouseEvent) => {
+    // Dialog has different conditions to close than Popup, so we don't need to iterate across all
+    // refs
+    const isInsideContentClick = doesNodeContainClick(this.contentRef.current, e)
+    const isInsideOverlayClick = doesNodeContainClick(this.overlayRef.current, e)
 
-      if (!doesNodeContainClick(this.contentRef.current, e)) {
-        this.handleDialogCancel(e)
-      }
-    },
-  })
+    const shouldClose = !isInsideContentClick && isInsideOverlayClick
+
+    if (shouldClose) {
+      this.handleDialogCancel(e)
+    }
+  }
 
   renderComponent({ accessibility, classes, ElementType, styles, unhandledProps }) {
     const {
@@ -250,7 +256,9 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
             overrideProps: {
               content: (
                 <Flex gap="gap.smaller" hAlign="end">
-                  {Button.create(cancelButton, { overrideProps: this.handleCancelButtonOverrides })}
+                  {Button.create(cancelButton, {
+                    overrideProps: this.handleCancelButtonOverrides,
+                  })}
                   {Button.create(confirmButton, {
                     defaultProps: {
                       primary: true,
@@ -264,7 +272,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
         </ElementType>
       </Ref>
     )
-    const triggerAccessibility = {
+    const triggerAccessibility: TriggerAccessibility = {
       attributes: accessibility.attributes.trigger,
       keyHandlers: accessibility.keyHandlers.trigger,
     }
@@ -278,12 +286,32 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
         triggerAccessibility={triggerAccessibility}
         triggerRef={this.triggerRef}
       >
-        {Box.create(overlay, {
-          defaultProps: {
-            styles: styles.overlay,
-          },
-          overrideProps: this.handleOverlayOverrides(dialogContent),
-        })}
+        <Unstable_NestingAuto>
+          {(getRefs, nestingRef) => (
+            <>
+              <Ref
+                innerRef={(contentNode: HTMLElement) => {
+                  this.overlayRef.current = contentNode
+                  nestingRef.current = contentNode
+                }}
+              >
+                {Box.create(overlay, {
+                  defaultProps: {
+                    className: Dialog.slotClassNames.overlay,
+                    styles: styles.overlay,
+                  },
+                  overrideProps: { content: dialogContent },
+                })}
+              </Ref>
+              <EventListener
+                listener={this.handleOverlayClick}
+                targetRef={documentRef}
+                type="click"
+                capture
+              />
+            </>
+          )}
+        </Unstable_NestingAuto>
       </Portal>
     )
   }
@@ -293,6 +321,7 @@ Dialog.slotClassNames = {
   header: `${Dialog.className}__header`,
   headerAction: `${Dialog.className}__headerAction`,
   content: `${Dialog.className}__content`,
+  overlay: `${Dialog.className}__overlay`,
 }
 
 /**
diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 97adeb5134..9aae717442 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -506,7 +506,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
               innerRef={domElement => {
                 this.popupDomElement = domElement
                 handleRef(contentRef, domElement)
-                handleRef(nestingRef, domElement)
+                nestingRef.current = domElement
               }}
             >
               {popupContent}
diff --git a/packages/react/src/components/Portal/Portal.tsx b/packages/react/src/components/Portal/Portal.tsx
index 1652181ea5..c29d0dbd65 100644
--- a/packages/react/src/components/Portal/Portal.tsx
+++ b/packages/react/src/components/Portal/Portal.tsx
@@ -17,11 +17,11 @@ import {
 import PortalInner from './PortalInner'
 import { FocusTrapZone, FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
 import { AccessibilityAttributes } from '../../lib/accessibility/types'
-import { AccessibilityKeyHandlers } from '../../lib/accessibility/reactTypes'
+import { AccessibilityHandlerProps } from '../../lib/accessibility/reactTypes'
 
 export type TriggerAccessibility = {
   attributes?: AccessibilityAttributes
-  keyHandlers?: AccessibilityKeyHandlers
+  keyHandlers?: AccessibilityHandlerProps
 }
 
 export interface PortalProps extends ChildrenComponentProps, ContentComponentProps {
diff --git a/packages/react/src/lib/handleRef.ts b/packages/react/src/lib/handleRef.ts
deleted file mode 100644
index 1e39aa57c0..0000000000
--- a/packages/react/src/lib/handleRef.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react'
-
-/**
- * The function that correctly handles passing refs.
- *
- * @param ref An ref object or function
- * @param node A node that should be passed by ref
- */
-const handleRef = <N>(ref: React.Ref<N>, node: N) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof ref === 'string') {
-      throw new Error(
-        'We do not support refs as string, this is a legacy API and will be likely to be removed in one of the future releases of React.',
-      )
-    }
-  }
-
-  if (typeof ref === 'function') {
-    ref(node)
-    return
-  }
-
-  if (ref !== null && typeof ref === 'object') {
-    // The `current` property is defined as readonly, however it's a valid way because `ref` is a mutable object
-    ;(ref as React.MutableRefObject<N>).current = node
-  }
-}
-
-export default handleRef