How are the following two statements different in React? - reactjs

Question

I was looking at the react docs today (https://beta.reactjs.org/learn/preserving-and-resetting-state), and I'm a bit confused on something.
In the docs, it says that you can force the state to reset by rendering a component in different positions, I get that.
When isPlayerA state changes, this one does not reset the state for Counter:
// App.js
import { useState } from 'react';
export default function Scoreboard() {
const [isPlayerA, setIsPlayerA] = useState(true);
return (
<div>
{isPlayerA ? (
<Counter person="Taylor" />
) : (
<Counter person="Sarah" />
)}
<button onClick={() => {
setIsPlayerA(!isPlayerA);
}}>
Next player!
</button>
</div>
);
}
function Counter({ person }) {
const [score, setScore] = useState(0);
const [hover, setHover] = useState(false);
let className = 'counter';
if (hover) {
className += ' hover';
}
return (
<div
className={className}
onPointerEnter={() => setHover(true)}
onPointerLeave={() => setHover(false)}
>
<h1>{person}'s score: {score}</h1>
<button onClick={() => setScore(score + 1)}>
Add one
</button>
</div>
);
}
When isPlayerA state changes, this one DOES reset the state for Counter:
return (
<div>
{isPlayerA &&
<Counter person="Taylor" />
}
{!isPlayerA &&
<Counter person="Sarah" />
}
<button onClick={() => {
setIsPlayerA(!isPlayerA);
}}>
Next player!
</button>
</div>
);
In both situations, it seems to be that Counter is getting rendered in the same position, so why is the second one resetting the state? Are there two Counter components in the UI tree on the second one where state does get reset?
Thanks for any help!