нет, не внутри map. Нужно, если key передан, задействовать его как атрибут

ты похоже не понимаешь как key в реакте работает

точнее, может быть и внутри map

напиши хотя бы так
<div key={key || index} />

и не надо вонючего ифа

вопрос не в этом, как опциально только атрибут задействовать

точнее не

<div key={key ?? index} />

<div {...someParams} />

вот так

сердцем чувствую, оно )))

спасибо)

Я бы подправил таким образом:  https://codepen.io/Noorama/pen/WNRaZqp

Конечно, можно и лучше, но работает, как вам нужно, скорее всего.
Несколько замечаний: Вы в локалстор не можете хранить данные в формате булиан - там будет лежать строковое значение. И когда вы его считываете - вы получаете строку, а не true | false. Так же useEffect вам ненужен в данном контексте - вы можете получать данные в качестве дефолтного значения стейта напрямую прокинув в setState(defaultData). Еще вместо animation в css я использовал transition.

А... у вас данные какие-то фетчятся.. ну тогда да - либо прокидывайте через пропсы в дефолтное значение useState, либо через useEffect - тоже должно сработать нормально.

Ребята, всем привет, кто нибудь работал с переводами (по типу i18n)? Как правильно организовать наименование ключей? По типу группировки общих и конкретных

Читается сложно. Будто это написал выходец из олимпиадного программирования.

Судя даже по тому, что условие не инвертировано

Имхо стоило бы экономить не строчки кода, а время коллег

Нет "правильного" подхода.