I tried to implement lazy loading but still couldn’t get it to work I tried to reduce the amount of data being generated from the API but still could not get it to work

import React, { useEffect, useState } from "react";
import "../home/home.css"
function Home() {
    const [products, setProducts] = useState([]);

    const GetProducts = async () => {
        try {
            const response = await fetch(`https://api.escuelajs.co/api/v1/products`);
            const data = await response.json();
            setProducts(data.splice(1,50));
        } catch (error) {
            console.error("Error fetching the products:", error);
        }
    };

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

    return (
        <div>
            <section className="homeBodySection">
                {products.map((product) => (
                    <div key={product.id} className="productBorder">
                        <img src={product.images[0]} alt={product.title} />
                        
                        <div className="productDetails">
                        <h3>{product.title}</h3>
                        <p>${product.price}</p>
                        </div>
                        <p className="productCategory">{product.category.name}</p>
                    </div>
                ))}
            </section>
        </div>
    );
}
export default Home;

This is the output: