diff --git a/changelogs/upcoming/7518.md b/changelogs/upcoming/7518.md
deleted file mode 100644
index 07585f3da793..000000000000
--- a/changelogs/upcoming/7518.md
+++ /dev/null
@@ -1,4 +0,0 @@
-**Bug fixes**
-
-- Fixed `useResizeObserver` hook to return the initial dimension correctly
-  ([#7518](https://github.com/elastic/eui/pull/7518)).
diff --git a/src-docs/src/views/resize_observer/resize_observer_hook.js b/src-docs/src/views/resize_observer/resize_observer_hook.js
index 270b0fac636f..4fa43f11938a 100644
--- a/src-docs/src/views/resize_observer/resize_observer_hook.js
+++ b/src-docs/src/views/resize_observer/resize_observer_hook.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 
 import {
   EuiButton,
@@ -24,8 +24,8 @@ export const ResizeObserverHookExample = () => {
     setItems((items) => [...items, `Item ${items.length + 1}`]);
   };
 
-  const resizeRef = useRef();
-  const dimensions = useResizeObserver(resizeRef.current);
+  const [resizeRef, setResizeRef] = useState();
+  const dimensions = useResizeObserver(resizeRef);
 
   return (
     <div>
@@ -56,7 +56,7 @@ export const ResizeObserverHookExample = () => {
 
       <EuiSpacer />
 
-      <div className="eui-displayInlineBlock" ref={resizeRef}>
+      <div className="eui-displayInlineBlock" ref={setResizeRef}>
         <EuiPanel className="eui-displayInlineBlock" paddingSize={paddingSize}>
           <ul>
             {items.map((item) => (
diff --git a/src/components/observer/resize_observer/resize_observer.tsx b/src/components/observer/resize_observer/resize_observer.tsx
index ac9f3d2f465a..b315cc38beea 100644
--- a/src/components/observer/resize_observer/resize_observer.tsx
+++ b/src/components/observer/resize_observer/resize_observer.tsx
@@ -70,10 +70,7 @@ export const useResizeObserver = (
   container: Element | null,
   dimension?: 'width' | 'height'
 ) => {
-  const [size, _setSize] = useState<{
-    width: undefined | number;
-    height: undefined | number;
-  }>({ width: undefined, height: undefined });
+  const [size, _setSize] = useState({ width: 0, height: 0 });
 
   // _currentDimensions and _setSize are used to only store the
   // new state (and trigger a re-render) when the new dimensions actually differ
@@ -122,5 +119,5 @@ export const useResizeObserver = (
     }
   }, [container, setSize]);
 
-  return { width: size.width ?? 0, height: size.height ?? 0 };
+  return { width: size.width, height: size.height };
 };