 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





registerListenersOnWindow(window);
          iframesListeningTo.add(iframe);
        }
      } catch (error) {
        
      }
    }
    
    
    showOverlay([target], null, agent, false);
    selectFiberForNode(target);
  }
  function onPointerUp(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
  }
  const selectFiberForNode = throttle(
    memoize((node: HTMLElement) => {
      const id = agent.getIDForNode(node);
      if (id !== null) {
        bridge.send('selectFiber', id);
      }
    }),
    200,
    
    
    {leading: false},
  );
}