Untitled

// ... other imports

const InfiniteScroll = ({ avgRating, user, pageSize, latestDoc }: Props) => {
  const router = useRouter();
  const [data, setData] = useState<QueryDocumentSnapshot<typeof PilotData>[]>([]);
  const { ref, inView } = useInView();
  const [loading, setLoading] = useState(false);
  
  const loadMoreData = async () => {
    if (loading || !latestDoc) return;
    setLoading(true);

    try {
      const { results, nextPilots } = await loadMore(latestDoc, pageSize);
      results.forEach((doc) => {
        nextPilots.push({
          id: doc.id,
          ...doc.data(),
        });
      });
      setData((prevData) => [...prevData, ...nextPilots]);
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (inView) {
      loadMoreData();
    }
  }, [inView, latestDoc, pageSize]);

  // ... rest of your component

  return (
    // ... your JSX
  );
};

export default InfiniteScroll;