diff --git a/CHANGELOG.md b/CHANGELOG.md
index 57e6c2cc2..8e69d9826 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@
 
 ### Fixed
 
+- `Dialog`: used proper `ref` creator ([@qubis741](https://github.com/qubis741) in [#2175](https://github.com/teamleadercrm/ui/pull/2175))
+
 ### Dependency updates
 
 ## [14.5.6] - 2022-05-26
diff --git a/src/components/dialog/Dialog.tsx b/src/components/dialog/Dialog.tsx
index c31688f6e..80d4482ea 100644
--- a/src/components/dialog/Dialog.tsx
+++ b/src/components/dialog/Dialog.tsx
@@ -1,12 +1,10 @@
-import React, { createRef, ReactNode } from 'react';
-import omit from 'lodash.omit';
+import { IconDragMediumFilled } from '@teamleader/ui-icons';
 import cx from 'classnames';
-
-import theme from './theme.css';
-
+import omit from 'lodash.omit';
+import React, { ReactNode, useRef } from 'react';
 import { Button, ButtonGroup, DialogBase, Heading3 } from '../../index';
-import { IconDragMediumFilled } from '@teamleader/ui-icons';
 import { DialogBaseProps } from './DialogBase';
+import theme from './theme.css';
 
 interface DialogProps extends Omit<DialogBaseProps, 'ref'> {
   /** If true, the dialog will show on screen. */
@@ -51,8 +49,8 @@ const Dialog = ({
   onCloseClick,
   ...otherProps
 }: DialogProps) => {
-  const bodyRef = createRef<HTMLElement>();
-  const dragHandleRef = createRef<HTMLDivElement>();
+  const bodyRef = useRef<HTMLElement>(null);
+  const dragHandleRef = useRef<HTMLDivElement>(null);
 
   const getHeader = () => {
     const dragIcon = (