 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





}: {
    displayName: string | null,
    hideAfterTimeout: boolean,
    id: number,
    openNativeElementsPanel: boolean,
    rendererID: number,
    scrollIntoView: boolean,
    ...
  }) {
    const renderer = agent.rendererInterfaces[rendererID];
    if (renderer == null) {
      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
    }
    let nodes: ?Array<HTMLElement> = null;
    if (renderer != null) {
      nodes = ((renderer.findNativeNodesForFiberID(
        id,
      ): any): ?Array<HTMLElement>);
    }
    if (nodes != null && nodes[0] != null) {
      const node = nodes[0];
      
      if (scrollIntoView && typeof node.scrollIntoView === 'function') {
        
        
        node.scrollIntoView({block: 'nearest', inline: 'nearest'});
      }
      showOverlay(nodes, displayName, agent, hideAfterTimeout);
      if (openNativeElementsPanel) {
        window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;