[DevTools Bug]: When inspecting with DevTools, it fails to select correct react component when there are multiple react-dom instances in the application

[danielkutt]

Website or app

https://codesandbox.io/s/jtiw8m

Repro steps

When using devtools in the linked codesandbox, I am not able to select react components that are rendered by the micro-fe using the inspect tool.

Steps to reproduce:

1. Go to https://jtiw8m.csb.app/
2. Open React DevTools and click on Inspect icon with the "Select an element on the page to inspect it" tooltip
3. Inspect the component with the pink background and text "micro-fe example heading"
4. Devtools selects App as the component (or if the component type filter is disabled, it selects the div where the micro-fe is mounted)

Ideally it would actually select either the MicroFeRoot component (or the corresponding html node if the filter is disabled).

I was able to get it working by doing the following change in the react-devtools-backend/src/backend/agent.js

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response