React reducer dispatch not called after component unmount - reactjs

Question

I have this simple React custom hook with a data list and remove/undo funcionality.
Now, I need to call a delete request on cleanup. The problem is the cleanup is called as an async onClose callback with a timeout delay, so when I delete an item and go to another page before the timeout runs out, the dispatch/reducer is not being called. I need to call the API delete request with the updated state.toRemove array which is only accessible in the reducer, even after the component unmounts.
The logs in the example code shows that after unmount, the cleanup function is being called, however the reducer with the updated state is not.
This example is based on React Toastify undo funcionality (which has no delete API calls)
Is this just a React limitation or is there some solution to it? Thank you!
import React, { useState, useEffect, useReducer } from 'react'
import { toast } from 'react-toastify'
function reducer(state, action) {
console.log("I'm not being called after component unmount.")
switch (action.type) {
case "LOAD_COLLECTION":
return {
collection: action.collection,
toRemove: state.toRemove
};
case "QUEUE_FOR_REMOVAL":
return {
collection: state.collection,
toRemove: [...state.toRemove, action.id]
};
case "CLEAN_COLLECTION": {
console.log("I'm not being called neither. API delete would go here.")
return {
collection: state.collection.filter(
v => !state.toRemove.includes(v.id)
),
toRemove: []
};
}
case "UNDO":
return {
collection: state.collection,
toRemove: state.toRemove.filter(v => v !== action.id)
};
default:
return state;
}
}
export default function useList() {
const [state, dispatch] = useReducer(reducer, { collection: [], toRemove: [] });
useEffect(() => {
// API CALL...
dispatch({ collecion, type: "LOAD_COLLECTION" })
}, [])
const undo = (id) => {
dispatch({ id, type: "UNDO" })
}
const remove = (id) => {
dispatch({ id, type: "QUEUE_FOR_REMOVAL" });
toast(<Undo id={id} text="Removed" undo={undo} />, {
onClose: clean,
})
}
const clean = () => {
console.log("I'm being called after the toast timeout, even after unmount.")
dispatch({ type: "CLEAN_COLLECTION" })
}
return {
remove,
list: state.collection.filter((s) => !state.toRemove.includes(s.id))
}
}