Re-render is not triggered after redux state gets updated

Question

I'm using redux-observable and I'm trying to get events after update events action is finished.

update-events.js

import { mergeMap, switchMap, from } from 'rxjs/operators';
import { ofType } from 'redux-observable';
import { showGlobalMessage } from 'src/actions/system';
import { setEvents, toggleEvents } from 'src/actions/regulator-events';
import { getRegulatorEvents, updateRegulatorEvents } from 'src/api/svc';
import { actionsObservableOf } from 'src/helpers/redux-observable-helper';
import { getGlobalMessageByStatus } from 'src/helpers/system';
import { NOTIFICATION_TYPES } from 'src/constants';
import { catchErrorWithAuth } from '../_operators/common';

export const toggleRegulatorEventStatusEpic = (action$, state$, { ajax }) =>
  action$.pipe(
    ofType(toggleEvents),
    switchMap(({ payload }) => {
      return updateRegulatorEvents(ajax, payload).pipe(
        mergeMap(() => {
          const successAction = showGlobalMessage(NOTIFICATION_TYPES.SUCCESS, 'Regulator event updated successfully!');
          const currentFilters = state$.value.regulatorEvents.filters;
          return getRegulatorEvents(ajax, currentFilters).pipe(
            mergeMap((response) => {
              const setEventsAction = setEvents({
                events: response,
              });
              return from([successAction, setEventsAction]);
            })
          );
        }),
        catchErrorWithAuth(({ response }) => {
          const { status } = response || {};
          return actionsObservableOf(showGlobalMessage(NOTIFICATION_TYPES.ERROR, getGlobalMessageByStatus(status)));
        })
      );
    })
  );

events.jsx

export const Events = () => {
  const dispatch = useDispatch();
  const filters = useSelector(R.path(['regulatorEvents', 'filters']));
  const events = useSelector(R.path(['regulatorEvents', 'items']));
  const { open, setData } = useModal(MODAL_IDS.REGULATOR_EVENTS);

  console.log(events);

  return (
    <>
       <Button
        type="primary"
        shape="circle"
        icon={<SearchOutlined />}
        onClick={() => dispatch(getEvents(filters))}
       />
      <div className="mx-3 my-2">
        <Table
          dataSource={[...events]}
          columns={columns((val) => {
            open();
            setData(events.find((e) => e.eventId === val));
          })}
          pagination={false}
        />
      </div>
      <EventsModal />
    </>
  );
};

events-modal.jsx

export const EventsModal = () => {
  const { close, data } = useModal(MODAL_IDS.REGULATOR_EVENTS);
  const dispatch = useDispatch();

  const updateEvent = async () => {
    dispatch(
      toggleEvents({
        eventId: data.eventId,
        betradarId: Number(formData.betradarId),
        available: formData.available,
        createdAt: data.createdAt,
        eventName: data.eventName,
      })
    );
    close();
  };

  return (
    <ModalWindow
      id={MODAL_IDS.REGULATOR_EVENTS}
      width={616}
      className="relative"
      title={<div className="flex items-center">Edit Event</div>}
      destroyOnClose
      footer={
        <>
          <Button onClick={close}>Cancel</Button>
          <Button type="primary" onClick={updateEvent}>
            Edit
          </Button>
        </>
      }
    >
      <div className="p-2">
        <span>Betradar ID</span>
        <Input
          placeholder="Betradar ID"
          value={formData.betradarId}
          className="betradar-id-input"
          type="number"
          onChange={handleBetradarIDChange}
          style={{ marginBottom: '10px' }} // Added for spacing
        />
        <Checkbox checked={formData.available} onChange={handleAvailableChange}>
          Allowance
        </Checkbox>
      </div>
    </ModalWindow>
  );
};

When I call toggleEvents it successfuly makes an api call but when it comes to second action "setEvents" the ui doesn't update.