Thắc mắc về rerender và commit của react

Cho e hỏi, giả sử ta có 1 component cha nhu sau:

export default function Cha(props) {
  const [state, setState] = useState(<Component1 />)

  const handleClick = (event) => {
      if(event.target.value === 'a') setState(<Component1 />);
      if(event.target.value === 'b') setState(<Component2 />);
  }

  return (
    <div style={{textAlign: "center"}}>
        <input type="submit" value='a' onClick={handleClick}/>
        <input type="submit" value='b' onClick={handleClick}/>
        <br />
        <br />
        {state}
    </div>
  );
}

Nếu component1 chứa:

<div>
    <h1>Giong nhau</h1>
    <p>Cua component A</p>
</div>

component2 chứa:

<div>
    <h1>Giong nhau</h1>
    <p>Cua component B</p>
</div>

Khi state của component cha thay đổi ( từ component 1 sang 2 ), e biết quá trình re render sẽ là component 1 sẽ unmount và thay thế bằng component 2, nhưng khi react commit thay đổi lên dom thật, ta thấy com 1 và 2 đều có phần tử giống nhau ( ở đây là <h1>Giong nhau</h1> ), nếu như thế thì react có giữ lại cái này ko ạ, hay vẫn xóa đi và lắp lại nó ạ