why react dev tools paint highlights to components in this example

//App.tsx import { A } from "./A"; import { B } from "./B"; function App() { return ( <> <div> <B /> </div> <A /> </> ); } export default App; //A.tsx import { useState } from "react"; export const A = () => { const [count, setCount] = useState(0); return ( <div onClick={() => setCount((prevCount) => prevCount + 1)}>{count}</div> ); }; //B.tsx export const B = () => { return <div>123</div> } 

In the App.tsx code above, when you click on component A, component B is also highlighted. However, after removing the div that wraps component B, clicking on component A no longer highlights component B. Why does this happen?

I'm studying React's reconciliation and virtual DOM, but I'm having a hard time understanding it.

---

another...

import { A } from "./A"; function App() { return ( <> <div> <A /> <A /> </div> <div> <A /> </div> </> ); } export default App; 

The above code also shows the highlight in an unusual way.