 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





/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */
import memoize from 'memoize-one';
import throttle from 'lodash.throttle';
import Agent from 'react-devtools-shared/src/backend/agent';
import {hideOverlay, showOverlay} from './Highlighter';
import type {BackendBridge} from 'react-devtools-shared/src/bridge';
let iframesListeningTo: Set<HTMLIFrameElement> = new Set();
export default function setupHighlighter(
  bridge: BackendBridge,
  agent: Agent,
): void {
  bridge.addListener(