Элемент дважды помещается в массив, хотя я просто добавил его один раз в приложение Nextjs/React.

Я работаю над небольшой карточной онлайн-игрой, но столкнулся с проблемой, которую никак не могу решить.

Я работаю с редуктором, так что каждый раз, когда появляется карта с типом "проклятие", она добавляется в массив curses[] игроков.

Это означает, что всякий раз, когда нажимается кнопка, функция handleClick проверяет, была ли карта картой с типом "проклятие", и если да, то она вызывает редьюсер, передавая правильное действие в качестве аргумента.

if (gameData.currentCard.type == CARD_TYPES.CURSE) {
        dispatch({
          type: ACTIONS.ADD_CURSE,
          payload: {
            curse: { card: gameData.currentCard, roundsLeft: CURSE_DUR }
          },
        });
}

Затем редьюсер проверяет действие и делает все остальное:

    case ACTIONS.ADD_CURSE:
      const indexAddCurse = state.players.indexOf(state.players[state.turn]);
      const curseOldPlayer = state.players[indexAddCurse];
      const curseNewPlayer = { ...curseOldPlayer, curses: [...curseOldPlayer.curses, action.payload.curse] };
      const cursePlayerArr = state.players;
      cursePlayerArr[indexAddCurse] = curseNewPlayer;
      return { ...state, players: cursePlayerArr };

И после одного нажатия кнопки сама функция действительно добавляет ОДНО проклятие в массив проклятий игрока. Но каким-то образом неожиданно появляется еще один объект проклятия.

Чтобы дать вам немного больше контекста: Прежде чем принять проклятие После принятия проклятия (обратите внимание на 2 проклятия)

Будем очень признательны за помощь :)