Tengo una página de producto ordenada por título. La clasificación funciona, todo está bien, pero cuando se produce la paginación, los elementos nuevos se cargan sin clasificar. ¿Como arreglarlo?

 const Grid = ({filter, countOnRow, totalCount, products}) => { const [fetching, setFetching] = useState(true) const [total, setTotal] = useState(totalCount) const [startPage, setStartPage] = useState(0) const [produs, setProdus] = useState([]) const [okay, setOkay] = useState(false) const [selectedSort, setSelectedSort] = useState('') useEffect(()=>{ if(fetching){ setProdus([...produs, ...products.slice(startPage,total)]) setStartPage(total) setTotal(total+total) setFetching(false ) } }, [fetching]) useEffect(()=>{ document.addEventListener('scroll', scrollHadnler); return function(){ document.removeEventListener('scroll', scrollHadnler) }; }, []) const scrollHadnler=(e)=>{ if(e.target.documentElement.scrollHeight-(e.target.documentElement.scrollTop+window.innerHeight)<100){ setFetching(true) } } const sortByName = (sort) => { setSelectedSort(sort) setProdus([...produs].sort((a,b) => a[sort].localeCompare(b[sort]))) setOkay(!okay) }

¿Cómo puedo implementar el filtrado para que persista después de la paginación?