Redux Toolkit. Выводит A non-serializable value was detected in an action, in the path: `payload`

Только учусь веб разработке и столкнулся с проблемой. Хочу сделать всплывающие уведомления и в стор помещаю лист с уведомлениями, при добавлении объекта выводит в консоль ошибку из шапки, а потом начинает ее выводить вообще при любом взаимодейтсвии со стором.

Слайс:

interface ToastListState {
  toastList: ToastItem[];
}

const initialState: ToastListState = {
  toastList: [],
};

export const toastListSlice = createSlice({
  name: "toastList",
  initialState,
  reducers: {
    addToast: (state, action: PayloadAction<ToastItem>) => {
      state.toastList.push(action.payload);
    },
    removeToast: (state, action: PayloadAction<number>) => {
      const index = state.toastList.findIndex((e) => e.id === action.payload);
      state.toastList.splice(index, 1);
    },
  },
});

Функция для создания уведомления:

export function makeToast(message: string, toastType: ToastType) {
  const newToast = new ToastItem(getId(), message, toastType);
  store.dispatch(addToast(newToast));
}

Непосредственно вызов:

  async function clickToClipboard() {
    await navigator.clipboard.writeText(value.toString());
    makeToast("Скопировано в буфер обмена", ToastType.Info)
  }

Модель уведомления:

export enum ToastType {
  Success = "success",
  Danger = "danger",
  Info = "info",
}

export class ToastItem {
  id: number;
  message: string;
  toastType: ToastType;

  constructor(
    _id: number,
    _message: string,
    _toastType: ToastType
  ) {
    this.id = _id;
    this.message = _message;
    this.toastType = _toastType;
  }
}