Как при использовании фильтров менять отрисовку массива элементов?

У меня есть массив finalProducts,в который я записываю из state уже отсортированный массив.

const state = useSelector(state => state.products)
let finalProducts = [];
const [items, setItems] = useState([]) 

Здесь происходит сама сортировка

switch(state.filter.type){ // из стате получаю фильтр и на основе его данных сортирую
        case "function":
            finalProducts = state.filter.criteria.action.call( //присваюваю finalProducts отсортированный массив
                [...state.products],
                state.filter.criteria.discerner
            );
            break;
        case "property":
            let criteria = state.filter.criteria;
            if(criteria.value instanceof Array){
                finalProducts = state.products.filter(item => criteria.value.includes(item[criteria.prop]))
            }
            else if(criteria.prop && criteria.value){
                finalProducts = state.products.filter(item=>item[criteria.prop]==criteria.value);
            }else{
                finalProducts = state.products;
            }    
            break;
    }

У меня массив должен быть отсортированным, а так же должна присутствовать динамическая пагинация.

useEffect(() => {
    if(fetching){ // подгружаю элементы
        setItems([...finalProducts.slice(0, total)]);
        setStartPage(total)
        setTotal(total+total);
        setFetching(false);
    }
    
}, [fetching])

useEffect(()=>{
    document.addEventListener('scroll', scrollHandler);

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

useEffect(() => {
    setItems([...finalProducts.slice(0, total)]);
    
}, [finalProducts]) // **ругается на эту зависимость**

и выводит я уже буду массив items

return (
    <div className="container" >
            {items.map(product => 
                    <div key={product.id} className="product">
                        <div>{product.name}</div>
                        <div><img src={product.img} /></div>
                    <div>{product.brand} {product.price}</div>
                </div>  
            )}
    </div>
)

Все отлично работает, фильтры применяются, пагинация работают. Только в консоли выдается ошибка

И ругается он из-за того, что я в зависимости useEffect передала finalProducts. Но ведь это логично, что при каждом изменения finalProducts должна меняться отрисовка. Я пробовала передавать в зависимости useEffect state.filter(то есть когда меняется фильтр, перерисовывать), но так он работает некорректно. Как правильно передать зависимости? Чтобы отображались правильные данные.