load-more-data Line 23 needs to be replaced with setProducts([...products, ...result.products]);

[Rope-a-dope]

because when you pass a parameter to the call back function and you spread it then render result.products , its like rendering the same result.products twice , and that is why you see the warning below of two identical Id or why you see items rendered twice ... but when we set it like this setProducts(() => [...products, ...result.products]); it means that we will spread the prev products from the state which in the initial state is set to [ ] so it means if there is no products then there will be no previos products to be spread and no error will appear

setProducts((prevData) => [...prevData, ...result.products]);

to

setProducts([...products, ...result.products]);