changed 'rootEl' to 'lazyBoundary' and its type as well

Author: 11koukou

packages/next/client/image.tsx

@@ -101,8 +101,7 @@ export type ImageProps = Omit<
   quality?: number | string
   priority?: boolean
   loading?: LoadingValue
-  //added 'rootEl' property of type HTMLElement, nullable for being able to set default value to null (see Below)
-  rootEl?: HTMLElement | null
+  lazyRoot?: React.RefObject<HTMLElement> | null
   lazyBoundary?: string
   placeholder?: PlaceholderValue
   blurDataURL?: string
@@ -317,7 +316,7 @@ export default function Image({
   unoptimized = false,
   priority = false,
   loading,
-  rootEl = null, //setting to null for the Intersection Observer API to set html root element as 'root' by default
+  lazyRoot = null,
   lazyBoundary = '200px',
   className,
   quality,
@@ -508,8 +507,7 @@ export default function Image({
   }
 
   const [setRef, isIntersected] = useIntersection<HTMLImageElement>({
-    //added 'root' to Options
-    root: rootEl,
+    root: lazyRoot?.current,
     rootMargin: lazyBoundary,
     disabled: !isLazy,
   })

packages/next/client/use-intersection.tsx

@@ -7,7 +7,7 @@ import {
 type UseIntersectionObserverInit = Pick<
   IntersectionObserverInit,
   'rootMargin' | 'root'
-> //added 'root' as a property
+>
 
 type UseIntersection = { disabled?: boolean } & UseIntersectionObserverInit
 type ObserveCallback = (isVisible: boolean) => void
@@ -20,7 +20,6 @@ type Observer = {
 const hasIntersectionObserver = typeof IntersectionObserver !== 'undefined'
 
 export function useIntersection<T extends Element>({
-  //added 'root' as an option
   root,
   rootMargin,
   disabled,
@@ -43,11 +42,11 @@ export function useIntersection<T extends Element>({
         unobserve.current = observe(
           el,
           (isVisible) => isVisible && setVisible(isVisible),
-          { root, rootMargin } //added 'root' as an option
+          { root, rootMargin }
         )
       }
     },
-    [isDisabled, root, rootMargin, visible] //added 'root' as a dependency
+    [isDisabled, root, rootMargin, visible]
   )
 
   useEffect(() => {