 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





} catch (error) {
        
      }
    });
    iframesListeningTo = new Set();
  }
  function removeListenersOnWindow(window: any) {
    
    if (window && typeof window.removeEventListener === 'function') {
      window.removeEventListener('click', onClick, true);
      window.removeEventListener('mousedown', onMouseEvent, true);
      window.removeEventListener('mouseover', onMouseEvent, true);
      window.removeEventListener('mouseup', onMouseEvent, true);
      window.removeEventListener('pointerdown', onPointerDown, true);
      window.removeEventListener('pointerover', onPointerOver, true);
      window.removeEventListener('pointerup', onPointerUp, true);
    } else {
      agent.emit('stopInspectingNative');
    }
  }
  function clearNativeElementHighlight() {
    hideOverlay(agent);
  }
  function highlightNativeElement({
    displayName,
    hideAfterTimeout,
    id,
    openNativeElementsPanel,
    rendererID,
    scrollIntoView,