пример 1:
<>
{
rename ? (
<div><Counter title='Щелкунчик' /></div>
) : (
<div><Counter title='Counter' /></div>
)
}
<button onClick={() => setRename(!rename)}>Переименовать</button>
</>
здесь у тебя первым чилдом в реактФрагменте всегда будут одни и те же фигурные скобки (да, это как бы отдельная нода в дереве реакта). В них всегда первый чилд - div (реакт определяет, что это один и тот же тип элемента), а в нем - Counter (снова определяемый как один и тот же). Потому для div и Counter не происходит перемонтирования, а только обновление пропсов.
пример 2:
<>
{ rename && <div><Counter title='Щелкунчик' /></div> }
{ !rename && <div><Counter title='Counter' /></div> }
<button onClick={() => setRename(!rename)}>Переименовать</button>
</>
здесь у Фрагмента первый и второй чилды - фигурные скобки (т.е. это два разных
независимых чилда). Ну и соответственно, в них то появляются, то исчезают свои чилды (элементы div с чилдом Counter), тут никаких связей между оными элементами из разных фигурных скобок не устанавливается.