Bug: Detached DOM nodes exist when component is unmounted

I’ve written a simple React APP which contains 2 buttons, one is to increase the count number trigger the child component to create a table element with some random numbers, another is to toggle mount/unmount status of the child component.

I found that just a simply mount the component then unmount it which leaves detached DOM nodes in memory profiling. Following below steps:

1. Click regen button
2. Click toggle button

but if I mount and unmount the component again by adding 3, 4 steps below:

1. Click regen button
2. Click toggle button
3. Click toggle button
4. Click toggle button

In such orders, those detached DOM nodes will be cleaned. Is there any reason why those detached DOM nodes are not clear for the first time but distinguished by the second time the component is unmounted?

React version: 17.0.2

Steps To Reproduce

1. Click regen button
2. Click toggle button

Link to code example: https://v6dhm.csb.app/

code attached:

import React, { useCallback, useMemo, useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [display, setDisplay] = useState(true);

  const regen = useCallback(() => {
    setCount((e) => ++e);
  }, []);
  const toggle = useCallback(() => {
    setDisplay((e) => !e);
  }, []);

  return (
    <div>
      <button onClick={regen}>regen</button>
      <button onClick={toggle}>toggle</button>
      {display && <FTable count={count}></FTable>}
    </div>
  );
};
const Cell = () => {
  const num = Math.floor(Math.random() * 100);
  return <td>{num}</td>;
};

const FTable = (props) => {
  const { count } = props;
  const rows = useMemo(() => {
    const r = [];
    if (count == 0) {
      return r;
    }
    for (let i = 0; i < 1000; i++) {
      r.push(
        <tr key={`${i}-${count}`}>
          <Cell></Cell>
          <Cell></Cell>
          <Cell></Cell>
        </tr>
      );
    }
    return r;
  }, [count]);

  return (
    <div>
      <table>
        <tbody>{rows}</tbody>
      </table>
    </div>
  );
};

export default App;

The current behavior

Detached HTMLTable* are found in the devTool memory timeline

The expected behavior

No Detached DOMs are found in the devTool memory timeline