谁能告诉我为什么按钮加载更多不工作.我写下了函数加载更多在文件挂钩.然后我给函数抛出 prop .结果它不工作.它返回相同的数据.如何改进它.这里是一个提取：

const instance = axios.create({
    baseURL: "https://fakestoreapi.com/",
})

export const getProducts = async ( page=1, limit = 5) => {
    const {data} = await instance.get<IProduct[]>("products", {
        params: {
        page,
            limit
        }
    });
    return data; 
}

function Product() {
   const [products, setProducts] = useState<IProduct[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
    const [error, setError] = useState('');
  const [page, setPage] = useState<number>(1);
  
    useEffect(() => {
      const fetchProducts = async () => {
        try {
        setLoading(true)
        setError(' ')
              const data = await getProducts(page);
              setProducts(data);
              setLoading(false)
            } catch (error: unknown) {
              setLoading(false)
              setError("Network Error!")
            }
        }

        fetchProducts()
    }, [page]);

  const loadMore = () => {
     setPage(prevPage => prevPage + 1)
    };

  return (<>
    <ul className={s.wrap}>
        {loading && <p>...loading</p>}
        {error && <ErrorMessage error={ error} />}
        {products.map(product => <ProductList product={product} key={product.id} />)}
        {!loading && products.length >= 3 && <button  onClick={loadMore}>Load more</button>}
        </ul>
    </>
      
  )
}

export default Product