how to paginate through user notifications without mixing them up? - node.js

Question

i'm working on a MERN app where the user can receive notifications on certain events, the user can then open the notification page where he can view his notifications, the issue that i have is the notifications have a "seen" state, the notifications that aren't seen will always be on top of the notification results..but say the user clicks on a notification which sets it as seen and then paginates further down the notification list by clicking on "show more" btn, he will find that earlier notification waiting for him in the bottom, basically it's duplicating..how can i fix this?
express controller for notifications
router.get("/", verifyUser, (req, res) => {
let userId = res.locals.user._id; //from the verify user MW, unrelated to question
let pageNum = req.query.page;
const options = {
page: pageNum,
limit: 8,
sort: { seen: 1, createdAt: -1 }
};
Notification.paginate({ receiver: userId }, options, (err, result) => {
if (err) {
console.log(err);
res.sendStatus(400);
} else {
res.status(200).json(result);
}
})
})
react
function Notifications(){
let { texts } = useContext(LangContext);
let [notificationsList, setNotificationsList] = useState([]);
let [isPending, setIsPending] = useState(true);
let [notiPage, setNotiPage] = useState(1);
let [hasNext, setHasNext] = useState(false);
function getNotifications() {
axios.get(`/api/notification?page=${notiPage}`).then(result => {
console.log(result);
setNotificationsList([...notificationsList, ...result.data.docs]);
if (result.data.hasNextPage) {
setNotiPage(result.data.nextPage);
setHasNext(true);
} else {
setHasNext(false);
}
setIsPending(false);
}).catch(err => {
console.log(err);
setIsPending(false);
})
}
//update notification seen status on the backend as well as on the front end
function toggleNotificationView(id, seen) {
let viewStatus = !seen;
axios.put(`/api/notification/${id}`, { seen: viewStatus }).then(result => {
console.log(result);
let notiArray = [...notificationsList];
let index = notiArray.findIndex(noti => {
return noti._id == id;
})
let editedNoti = notiArray[index];
editedNoti.seen = viewStatus;
notiArray.splice(index, 1, editedNoti);
setNotificationsList(notiArray);
}).catch(err => {
console.log(err);
})
}
return <div>
<div className="d-flex flex-column justify-content-center align-content-center my-3">
{notificationsList.map(notification => {
return (<div key={notification._id} id={notification._id} className="w-70 mx-auto">
<div className={`d-flex justify-content-between ${!notification.seen ? "new-notification" : ""}`}>
<a className="text-decoration-none text-dark" href={notification.srcInfo.link}>
<div className={`d-flex justify-content-start align-items-center`}>
<img src={notificationBell} width={100} height={100} />
<p className="text-start fs-4 mx-4" >{parseNotification(notification)}</p>
</div>
</a>
<div className="noti-dropdown noselect align-self-start">
<i onClick={toggleDropDown} className="bi bi-three-dots-vertical fs-4"></i>
<ul className="noti-dropdown-options px-0 fs-5">
<li onClick={() => { deleteNotification(notification._id) }}>{texts.deleteNotification}</li>
<li onClick={() => { toggleNotificationView(notification._id, notification.seen) }}> {notification.seen ? texts.markNotificationNotSeen : texts.markNotificationSeen}</li>
</ul>
</div>
</div>
<hr className="text-main" />
</div>)
})}
</div>
{hasNext && <h4 onClick={getNotifications} className="mx-auto text-center text-main text-decoration-underline"><span className="cursor-pointer">{texts.notificationShowMore}</span></h4>}
</div>
}
the problem is happening because i'm sorting by seen while paginating, what can i do about this?