Fix:- Fixed dev tools inspect mode on Shadow dom (#26888)

Fixes #26200 

### PR explanation

I tried to induce the change by the `event.composed` to check whether
the event was created in a ShadowRoot, And replaced `pointerOver` with
`pointerMove`, pointerOver event did not fired correctly

Before PR:-


https://github.com/facebook/react/assets/72331432/67a33dcd-447f-4c68-9c3c-ad954baddeb8

After PR:-


https://github.com/facebook/react/assets/72331432/9f986ff2-785f-4cba-a504-44f82ea9fc5a

---------

Co-authored-by: Biki das <bikidas@Bikis-MacBook-Pro.local>

packages/react-devtools-shared/src/backend/views/Highlighter/index.js

@@ -46,7 +46,7 @@ export default function setupHighlighter(
       window.addEventListener('mouseover', onMouseEvent, true);
       window.addEventListener('mouseup', onMouseEvent, true);
       window.addEventListener('pointerdown', onPointerDown, true);
-      window.addEventListener('pointerover', onPointerOver, true);
+      window.addEventListener('pointermove', onPointerMove, true);
       window.addEventListener('pointerup', onPointerUp, true);
     } else {
       agent.emit('startInspectingNative');
@@ -74,7 +74,7 @@ export default function setupHighlighter(
       window.removeEventListener('mouseover', onMouseEvent, true);
       window.removeEventListener('mouseup', onMouseEvent, true);
       window.removeEventListener('pointerdown', onPointerDown, true);
-      window.removeEventListener('pointerover', onPointerOver, true);
+      window.removeEventListener('pointermove', onPointerMove, true);
       window.removeEventListener('pointerup', onPointerUp, true);
     } else {
       agent.emit('stopInspectingNative');
@@ -151,14 +151,17 @@ export default function setupHighlighter(
     event.preventDefault();
     event.stopPropagation();
 
-    selectFiberForNode(((event.target: any): HTMLElement));
+    selectFiberForNode(getEventTarget(event));
   }
 
-  function onPointerOver(event: MouseEvent) {
+  let lastHoveredNode: HTMLElement | null = null;
+  function onPointerMove(event: MouseEvent) {
     event.preventDefault();
     event.stopPropagation();
 
-    const target = ((event.target: any): HTMLElement);
+    const target: HTMLElement = getEventTarget(event);
+    if (lastHoveredNode === target) return;
+    lastHoveredNode = target;
 
     if (target.tagName === 'IFRAME') {
       const iframe: HTMLIFrameElement = (target: any);
@@ -197,4 +200,12 @@ export default function setupHighlighter(
     // because those are usually unintentional as you lift the cursor.
     {leading: false},
   );
+
+  function getEventTarget(event: MouseEvent): HTMLElement {
+    if (event.composed) {
+      return (event.composedPath()[0]: any);
+    }
+
+    return (event.target: any);
+  }
 }