无法使用包含react-infinite- scroll -component包的InfiniteScroll实现反向滚动分页

import React, { useState, useEffect, useRef } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

const ReverseScrollPagination = () => {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const containerRef = useRef(null);

  useEffect(() => {
    // 初始化数据
    loadItems();
  }, []);

  const loadItems = () => {
    // 模拟数据加载
    setTimeout(() => {
      const newItems = Array.from({ length: 10 }, (_, i) => items.length + i);
      setItems([...items, ...newItems]);
      if (items.length > 50) {
        setHasMore(false);
      }
    }, 1000);
  };

  const handleScroll = (event) => {
    const { scrollHeight, scrollTop, clientHeight } = event.target;
    if (scrollTop === 0 && hasMore) {
      // 滚动到顶部且还有更多数据时加载更多内容
      loadItems();
    }
  };

  return (
    <InfiniteScroll
      ref={containerRef}
      dataLength={items.length}
      next={() => {}}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
      scrollableTarget="scrollableDiv"
      onScroll={handleScroll}
    >
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </InfiniteScroll>
  );
};

export default ReverseScrollPagination;