Reactjs сохранение данных объекта при обновлении состояния
 

Всем привет.

Помогите разобраться в задаче:
Есть большой массив с данными, его нужно постепенно выводить пользователю при скроллинге страницы.

Необходимо из большого массива отбирать по частям данные и добавлять их в дополнительный массив, который записан в state.

Проблема:
Не могу сохранить данные в дополнительном массиве в момент добавления новых.

import { useEffect, useState, useContext } from 'react'
import { Link } from 'react-router-dom'
import { IconArray } from '@services/context'
 
const ICONS_PER_PAGE = 5
 
const IconsList = () => {
    const { iconArray, setIconArray } = useContext(IconArray)
 
    const [triggerToLoad, setTriggerToLoad] = useState(true)
    const [iconArrayLazy, setIconArrayLazy] = useState([])
 
    const scrollHandler = (e) => {
        let scrollGalleryValue = document.querySelector('.list__container').getBoundingClientRect().y + document.querySelector('.list__container').clientHeight - window.innerHeight
        if (scrollGalleryValue <= 0 ) {
            setTriggerToLoad(!triggerToLoad)
            console.log(iconArrayLazy); // ? Тут дополнительный массив всегда пустой, как сохранять предыдущие данные?
        }
    }
 
    useEffect(() => {
        // ? добавляем следующие порции, когда срабатывает триггер
        setIconArrayLazy(iconArrayLazy => [...iconArrayLazy, ...iconArray.slice(iconArrayLazy.length, iconArrayLazy.length + ICONS_PER_PAGE)])
    }, [triggerToLoad])
 
    useEffect(() => {
        // ? добавляем первую порцию данных от 0 до ICONS_PER_PAGE
        setIconArrayLazy(iconArrayLazy => [...iconArrayLazy, ...iconArray.slice(iconArrayLazy.length, iconArrayLazy.length + ICONS_PER_PAGE)])
        document.addEventListener('scroll', scrollHandler)
        return function () {
            document.removeEventListener('scroll', scrollHandler)
        }
    }, [])
 
    return (
        <>
            <ul className="list__container">
 
                {iconArrayLazy.map(({id, title, img}) =>
 
                    <li className="icon_container" key={id}>
                        <Link to={`/icon-${id}`}>
                            <img className="icon_container__image" src={img} alt={title} />
                        </Link>
                    </li>
                )}
 
            </ul>
        </>
    )
}
 
export default IconsList