I think the loader doesn’t even work, I tried to change the length, one of its parameters, but it didn’t help, and it doesn’t work even once, I put console.log(1) in it, and the code didn’t work once, I think I didn’t set it up correctly somewhere

"use client";
import { useEffect, useState } from "react";
import fullStar from './Fillness=Full.svg';
import halfStar from './Fillness=Half.svg';
import noneStar from './Fillness=None.svg';
import {round} from 'mathjs';
import Image from 'next/image'
import css from './main.module.css'
import InfiniteScroll from 'react-infinite-scroll-component';





export default function Main(){
    const [posts, setPosts] = useState([]);
    let page =1;

    const loadNewProducts = async () => {
          try {
            const res = await fetch (`https://skillfactory-task.detmir.team/products?search=%D0%9A%D0%BE%D0%BB%D1%8F%D1%81%D0%BA%D0%B0&page=${page}&limit=3&sort=title%3Aasc`,{credentials: "include"});
            const data = await res.json();
      
            setPosts((prevPosts) => {
              const newPosts = data.data.filter((item) => !prevPosts.some((post) => post.id === item.id));
              return [...prevPosts, ...newPosts];
            });
          } catch (err) {
            console.error(err.message);
          }await page++;         
      };



        // eslint-disable-next-line react-hooks/exhaustive-deps
        useEffect(() => {loadNewProducts()}, [])


        const Stars = (rating: number)=>{
            rating;
            // eslint-disable-next-line react/jsx-key
            const fullStars = Array.from({length:5}, (item,index) => {if((rating-index)>0 && (rating-index)<1){return <Image className={`star`} src={halfStar} alt="star"/>};if(round(rating)-index>0){return <Image className={`star`} src={fullStar} alt="star"/>};if(round(rating)-index<0){return <Image className={`star`} src={noneStar} alt="star"/>}})
            return <div className={css.pictureStars}>{fullStars}</div>
        }



    return(
        <main>
            <InfiniteScroll next={() => {page++;loadNewProducts}} hasMore={true} loader={<h4 className={css.Loading}>Загрузка...</h4>} dataLength={posts.length}>
                <section className = {css.pictureSection}>
                    {posts.map(post => 
                    // eslint-disable-next-line react/jsx-key
                    <div className={css.pictureDiv}>
                        <img className={css.loadPicture} src={post.picture} width = "250" height = "250" alt={`${post.title}`}/>
                        <p className={css.pictureTitle}>{post.title}</p>
                        {Stars(post.rating)}
                        <p className ={css.picturePrice}>{post.price} ₽</p>
                    </div>)}
                </section>
            </InfiniteScroll>
        </main>
        )
}

Ive tried to change length of infinite scroller,but it didnt helped