I am not able to access my updated state in a function. Here is my scenario:

I have a getImages() function which gets called when either the component loads for the first time or the user reaches to the end of the page while scrolling to fetch new images via API call. On first time component load, I want to give the random page value that's why I am passing a random number from first useEffect hook and when user reaches to the end of page, I want to make use of pageNum state. But every time while reaching to the end of page, the pageNum value is coming as 0 in the API call as well as in the console log. I was expecting the updated pageNum state as everytime in the end of getImages() function, pageNum state is getting incremented by 1. I checked react dev tools and there the pageNum state is updating correctly.

Here is the snippet of my code:

The images state is updating correct, it is making use of existing state and appending new images on every call.

    const [images, setImages] = useState([]);

    const [pageNum, setPageNum] = useState(0);
 
    useEffect(() => {
        getImages(Math.floor(Math.random() * 100) + 1);
    }, []);

    useEffect(() => {
        window.addEventListener("scroll", () => {
            if((window.innerHeight + window.scrollY) === document.body.scrollHeight){
                getImages();
            }
        });
        
    }, []);

    async function getImages(pageNo){
        let response;
        console.log(pageNum);
        if(pageNo === undefined){
            response = await fetch(`<API URL>&page=${pageNum}`);
        }
        else{
            response = await fetch(`<API URL>&page=${pageNo}`);
        }
        const data = await response.json();

        setImages(function(currentState){
            return [...currentState, ...data];
        });
        setPageNum(function(currentState){
            return currentState + 1;
        });
    }

Please let me know if I am missing out anything.