Не удается получить доступ к состоянию внутри функции в компоненте React Function

Question

У меня есть следующий компонент в React:

import React, { useState, useEffect } from 'react';
import api from '../../services/api';

const Store = () => {
  const [products, setProducts] = useState([]);
  let pagination = null;

  const getProducts = async (page = 1) => {
    const { data } = await api.get('products', { params: { page } });

    setProducts([...products, ...data.products]);
    pagination = data.pagination;

    if (pagination.current < pagination.max) {
      document.addEventListener('scroll', loadMore);
    }
  };

  const loadMore = () => {
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;

    if (scrollTop + clientHeight >= scrollHeight - 300) {
      getProducts(pagination.current + 1);
      document.removeEventListener('scroll', loadMore);
    }
  };

  useEffect(() => {
    getProducts();
  }, []);

  useEffect(() => {
    console.log(products);
  }, [products]);

  return (
    <div>
      {products.map(product => (
        <p>{product.name}</p>
      ))}
    </div>
  );
};

export default Store;

Мой console.log внутри хука useEffect правильно печатает массив продуктов, и компонент также правильно отображает названия продуктов.

Но когда я пытаюсь получить доступ к переменной products внутри функции getProducts, он не получает обновленное значение продукта, он получает значение, которое я установил в хуке useState.

Например, если я запускаю состояние с одним продуктом, вызов products в функции getProducts всегда приведет к этому продукту, а не к тем, которые были загружены из выборки API, которые были правильно зарегистрированы в консоли. .

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

Есть идеи, почему это происходит? Будучи в состоянии получить доступ к продуктам внутри хука useState, но не внутри функции getProducts?