### Website or app

Please checkout the linked branch not `main`
https://github.com/eps1lon/react-devtools-repro-no-matching-node/tree/repro/elements-leaking
Repro steps and screen recording included in the repro

### Repro steps

1. Clone repro
1. yarn
1. yarn start
1. Open app page
1. open devtools
1. Uncomment the `useEffect` block i.e. add an effect
1. inspect `Component` element
1. comment `useEffect` block i.e. remove the effect
1. Repeat comment/uncomment to see that children grow indefinitely


### How often does this bug happen?

Every time

### DevTools package (automated)

_No response_

### DevTools version (automated)

_No response_

### Error message (automated)

Could not inspect element with id 4

### Error call stack (automated)

_No response_

### Error component stack (automated)

_No response_

### GitHub query string (automated)

_No response_

Might be a duplicate of https://github.com/facebook/react/issues/21436#issuecomment-835406075 since the repro steps are the same. But depending on what the effect is doing, the behavior is different.
function findCurrentFiberUsingSlowPathById(id: number): Fiber | null {
    const fiber = idToFiberMap.get(id);
    if (fiber == null) {
      console.warn(`Could not find Fiber with id "${id}"`);
      return null;
    }
    const alternate = fiber.alternate;
    if (!alternate) {
       If 
      const state = isFiberMountedImpl(fiber);
      if (state === UNMOUNTED) {
        throw Error('Unable to find node on an unmounted component.');
      }
      if (state === MOUNTING) {
        return null;
      }
      return fiber;
    }
     If we have two possible branches, we'll walk backwards up to the root
     to see what path the root points to. On the way we may hit one of the
     special cases and we'll deal with them.
    let a: Fiber = fiber;
    let b: Fiber = alternate;
    while (true) {
      const parentA = a.return;
      if (parentA === null) {
         We'
        break;
      }
      const parentB = parentA.alternate;