Esta es la primera vez que implemento el desplazamiento infinito de reacción. Me encontré con dificultades donde la matriz inicial de datos sigue repitiéndose.

 function Details() { const [facility, setFacility] = useState([]); const [loading, setLoading] = useState(true); const getFacility = useCallback(async () => { let skip = 0; setLoading(true) await Axios.get( `...apiUrl/${wardTitle}/ward/details?limit=${10}&skip=${skip}` ).then((response) => { const details = response.data.data; setFacility((prev) => [...prev, ...details]); setLoading(false) }); }, [wardTitle]); const handleScroll = (e) => { const { scrollTop, scrollHeight, clientHeight} = e.currentTarget; if(clientHeight + scrollTop + 1 >= scrollHeight ){ getFacility(); } }; useEffect(() => { getFacility(); }, [getFacility]); return ( <> {facility.map((cur) => ( <div>{curr}</div> {loading && <h4>Loading ...</h4> ) </> ) }

Todo parece estar bien aparte de la repetición de datos. No sé dónde me equivoqué en la llamada. Apreciaría cualquier ayuda.