docs(image): Use hook inside of function component (#40096)

The example broke the [Rules of Hooks](https://reactjs.org/warnings/invalid-hook-call-warning.html#:~:text=Hooks%20can%20only%20be%20called%20inside%20the%20body%20of%20a%20function%20component.) by calling the hook outside of the function component.

Co-authored-by: JJ Kasper <jj@jjsweb.site>

docs/api-reference/next/image.md

@@ -279,14 +279,16 @@ The Ref must point to a DOM element or a React component that [forwards the Ref]
 import Image from 'next/image'
 import React from 'react'
 
-const lazyRoot = React.useRef(null)
+const Example = () => {
+  const lazyRoot = React.useRef(null)
 
-const Example = () => (
-  <div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
-    <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
-    <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
-  </div>
-)
+  return (
+    <div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
+      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
+      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
+    </div>
+  )
+}
 ```
 
 **Example pointing to a React component**