I have a product page sorted by title. Sorting works, everything is fine, but when pagination occurs, new items are loaded without sorting. How to fix it?

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)
}

How can I implement the filtering to persist after pagination.