Какие различия имеют два типа условных рендера?

Внутри компонента <Toggle /> есть свой стейт, а так же инициализация в зависимости от isOpenInit. В случае использование тернарного оператора, один стейт на два компонента, т.е. изменить стейт на одном компоненте, меняется и на другом. (открыли один таб, открыли тоггл, зашли на другой там тоггл открыт, хотя первоначальное состояние false). В случае использование логического && стейты разные и все отрабатывает как должно.

Какие различия имеют 2 типа рендера? (с использованием логического &&, с использованием тернарного оператора соответственно)

1)

{ indexTab === 0 && (
    <Toggle isOpenInit = {false} /> }

{ indexTab === 1 && (
    <Toggle isOpenInit = {false} /> }

{ indexTab === 0 ? (
    <Toggle isOpenInit = {false} /> )

: ( indexTab === 1 && (
    <Toggle isOpenInit = {false} /> ) }