Я пытаюсь загрузить все «группы» из моей Firebase после загрузки моего приложения React, но у меня странное поведение.Сначала он корректно загружает их, поэтому, если в моей базе данных сохранено 3 группы, будет показано 1, 2, 3, 4, например: 
, но как толькоЯ добавляю еще одну группу в список, он делает это:

Код, который я должен загрузить группы на componentDidMount, таков:
componentDidMount(){
this.setGroups();
}
setGroups(){
const groupRef = fire.database().ref('groups');
const groupArray = [];
const idArray = [];
groupRef.on('value', snapshot => {
snapshot.forEach(group => {
console.log('groupid: ' + group.key);
idArray.push(group.key);
let addGroup = {
id: group.key,
name: group.val().name
}
if(groupArray.length !== idArray.length){
groupArray.push(addGroup);
console.log('pushed');
}
})
this.setState(previousState => ({
groups: groupArray
}));
})
}
Тогда вот как я обрабатываю добавляемую группу:
handleGroupAdd = (group) => {
const groupRef = fire.database().ref('groups').child(group.id).set({
name: group.name,
id: group.id
});
this.setState(previousState => ({
groups: [...previousState.groups, group]
}));
this.handleClose();
};
База данных хранит данные правильно, без дублированных объектов, так что это просто рендеринг групп, который испортился.Что я предполагаю, что состояние испорчено над надстройкой?