 Using react while making a shadow DOM and then using react devtools inspect element feature does not work as expected video and codesandbox below

**sandboxLink**
https://stackblitz.com/edit/react-zqp67t?file=src/App.js

**while attaching shadowroot**



https://user-images.githubusercontent.com/72331432/219961254-65c9e84c-9774-441f-9eec-e9ef58f1382d.mp4



**without attaching  root**


https://user-images.githubusercontent.com/72331432/219961266-b276063e-e0f4-4f30-b614-0af3876a9916.mp4





'clearNativeElementHighlight',
    clearNativeElementHighlight,
  );
  bridge.addListener('highlightNativeElement', highlightNativeElement);
  bridge.addListener('shutdown', stopInspectingNative);
  bridge.addListener('startInspectingNative', startInspectingNative);
  bridge.addListener('stopInspectingNative', stopInspectingNative);
  function startInspectingNative() {
    registerListenersOnWindow(window);
  }
  function registerListenersOnWindow(window: any) {
    
    if (window && typeof window.addEventListener === 'function') {
      window.addEventListener('click', onClick, true);
      window.addEventListener('mousedown', onMouseEvent, true);
      window.addEventListener('mouseover', onMouseEvent, true);
      window.addEventListener('mouseup', onMouseEvent, true);
      window.addEventListener('pointerdown', onPointerDown, true);
      window.addEventListener('pointerover', onPointerOver, true);
      window.addEventListener('pointerup', onPointerUp, true);
    } else {
      agent.emit('startInspectingNative');
    }
  }
  function stopInspectingNative() {
    hideOverlay(agent);
    removeListenersOnWindow(window);
    iframesListeningTo.forEach(function (frame) {
      try {
        removeListenersOnWindow(frame.contentWindow);