React & Redux, не происходит ререндер

Когда я вызываю handleNotificationRemove, то через props.getNotification(10, 1, "simple") я обновляю данные, но мне не понятно, почему до того, как я не перезагружу страницу, уже удалённые значения не исчезают, почему не происходит ререндер?

Вот мой код компонента:

import style from "./NotificationPopupContainer.module.scss"
import svg from "../../../assets/svg/search.svg"
import classNames from "classnames"
import { connect } from "react-redux";
import { compose } from "redux";
import { getNotification, removeNotification, notificationWasReaded } from "../../../redux/reducers/notificationReducer";
import Notification from "./Notification/Notification";
import { useState, useEffect } from "react";
import { getFriend } from "../../../redux/reducers/friendReducer";

const NotificationPopupContainer = props => {

    const notificationArray = props.notifications

    const notification_popup_content = document.querySelector("#notification_popup_content")

    const [arr, setArr] = useState([])
    const [page, setPage] = useState(1)
    const [fetching, setFetching] = useState(true)

    const handlerClickNotification = (num, notificationId) => {
        switch (num) {

            case 1:
                setArr(prevState => [...prevState, notificationId])
                break
            case 2:
                arr.pop()
                setArr(prevState => [...prevState])
                break
        }
    }

    useEffect(() => {
        props.getFriend()
    }, [])


    useEffect(() => {
        if (fetching) {
            setPage(prevState => prevState + 1)
            props.getNotification(10, page, "additional")
            setFetching(false)
        }
    }, [fetching])


    const scrollHandler = (e) => {
        if ((e.target.scrollHeight - (e.target.clientHeight + e.target.scrollTop) < 5) && props.itemsCount - notificationArray.length > 0) {
            setFetching(true)
        }
    }

    useEffect(() => {
        if (notification_popup_content) {
            notification_popup_content.addEventListener('scroll', scrollHandler)

            return function () {
                notification_popup_content.removeEventListener('scroll', scrollHandler)
            }
        }
    }, [scrollHandler])




    function isAllUnchecked() {
        const checkboxes = document.querySelectorAll('#notification_popup_content input[type="checkbox"]');
        return !Array.from(checkboxes).some((checkbox) => checkbox.checked);
    }

    function handleNotificationRemove() {
        props.removeNotification(arr).then(() => {
            setArr([])
            props.getNotification(10, 1, "simple")

        })
    }




    return (
        <div className={props.isPopup ? style.notification_popup : style.none}>
            <div className={style.notification_header}>
                <div className={style.a}>
                    <span>Notification</span>
                    <span className={style.text_underline}>Mark all as read</span>
                </div>
                <div>
                    <div className={style.notification_header_categories}>
                        <div>
                            <span>All</span>
                            <span className={classNames(style.number_container, style.number_container_selected)}>8</span>
                        </div>
                        <div>
                            <span >Following</span>
                            <span className={classNames(style.number_container, style.number_container_selected)}>6</span>
                        </div>

                    </div>
                    <span onClick={handleNotificationRemove} className={isAllUnchecked() ? style.none : style.deleteNotificationButton}>DELETE NOTIFICATION</span>
                </div>
            </div>
            <div id="notification_popup_content" className={style.notification_content}>
                {notificationArray.map(item => {
                    return <Notification setArr={setArr} handlerClickNotification={handlerClickNotification} friends={props.friends} type={item.type} notificationId={item._id} notificationDate={item.date} message={item.message} user={item.user} />
                })}
            </div>
        </div>
    )

}
const mapStateToProps = (state) => ({
    notifications: state.notifications.notifications,
    itemsCount: state.notifications.itemsCount,
    friends: state.friends.friends
})

export default compose(
    connect(mapStateToProps, { getNotification, removeNotification, getFriend })
)(NotificationPopupContainer)

Вот редюсер:

import { notificationAPI } from "../../api/axios/notificationAPI"

const SET_NOTIFICATIONS_ADDITIONAL = "SET_NOTIFICATIONS_ADDITIONAL"
const SET_NOTIFICATIONS_SEIMPLE = "SET_NOTIFICATIONS_SEIMPLE"

const initialState = {
    notifications: [],
    itemsCount: 0
}



export const notificationReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_NOTIFICATIONS_ADDITIONAL:
            return getNotificationAddition(state, action)
        case SET_NOTIFICATIONS_SEIMPLE:
            return getNotificationSimple(state,action)
        default:
            return state
    }
}


const setNotificationsAdditional = (notifications) => ({
    type: SET_NOTIFICATIONS_ADDITIONAL,
    notifications
})
const setNotificationsSimple = (notifications) => ({
    type: SET_NOTIFICATIONS_SEIMPLE,
    notifications
})

const getNotificationAddition = (state, action) => {
    const { notifications } = action
    return {
        ...state,
        notifications: [...state.notifications, ...notifications.notificationsData],
        itemsCount: notifications.itemsCount
    }
}

const getNotificationSimple = (state, action) => {
    const { notifications } = action
    return{
        ...state,
        notifications:[...notifications.notificationsData],
        itemsCount: notifications.itemsCount
    }
}

export const getNotification = (itemsCount, page, type) => {
    return async (dispatch) => {
        const notifications = await notificationAPI.getNotification(itemsCount, page)
        switch(type){
            case "additional":
                dispatch(setNotificationsAdditional(notifications))
                break
            case "simple":
                dispatch(setNotificationsSimple(notifications))
                break
            default:
                return
        }
    }
}


export const removeNotification = (notificationsID) => {
    return async (dispatch) => {
        await notificationAPI.removeNotification(notificationsID)
    }
}


export const notificationWasReaded = (notificationsID) => {
    return async (dispatch) => {
        await notificationAPI.notificationWasReaded(notificationsID)
    }
}