in my NextJS app, i implemented redux for states management, i cant do CRUD actions in the states, when i add something i cant update it on the states to,

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { IEvent } from "../../../utils/interface/I_agenda";

export interface SecretariatState {
  events: IEvent[];
}

const initialState: SecretariatState = {
  events: [],
};

const secretariatSlice = createSlice({
  name: "secretariat",
  initialState,
  reducers: {
    setEvents: (state, action: PayloadAction<IEvent[]>) => {
      state.events = action.payload;
    },
    setEvent: (state, action: PayloadAction<IEvent>) => {
      state.events = [...state.events, action.payload];
    },
    editEventAction: (state, action: PayloadAction<IEvent>) => {
      const index = state.events.findIndex(
        (element) => element.id === action.payload.id
      );
      if (index !== -1) {
        state.events[index] = action.payload;
      }
    },
    deleteEventAction: (state, action: PayloadAction<number>) => {
      state.events = state.events.filter(
        (element) => element.id !== action.payload
      );
    },
  },
});

export const { setEvents, setEvent, editEventAction, deleteEventAction } =
  secretariatSlice.actions;

export default secretariatSlice.reducer;

in this part for example:

    setEvent: (state, action: PayloadAction<IEvent>) => {
      state.events = [...state.events, action.payload];
    },

it returns an error that state.events is not iterable, any suggestions ??

I want to update the states in any change, and expect that in each CRUD operation the states in the client side will update too