 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





bridge.send('syncSelectionToNativeElementsPanel');
      }
    } else {
      hideOverlay(agent);
    }
  }
  function onClick(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
    stopInspectingNative();
    bridge.send('stopInspectingNative', true);
  }
  function onMouseEvent(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
  }
  function onPointerDown(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
    selectFiberForNode(((event.target: any): HTMLElement));
  }
  function onPointerOver(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
    const target = ((event.target: any): HTMLElement);
    if (target.tagName === 'IFRAME') {
      const iframe: HTMLIFrameElement = (target: any);
      try {
        if (!iframesListeningTo.has(iframe)) {
          const window = iframe.contentWindow;