如何在Material-UI对话框中使用react-infinite scroll-component？

import React, { useState, useEffect } from 'react';
import Dialog from '@material-ui/core/Dialog';
import InfiniteScroll from 'react-infinite-scroll-component';

const MyDialog = () => {
  const [open, setOpen] = useState(false);
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  // 模拟异步加载数据
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    // 模拟异步加载数据
    setTimeout(() => {
      // 假设这是从服务器获取的新数据
      const newData = [...data, ...newDataFromServer];

      setData(newData);
      setHasMore(newData.length < totalDataCount);
    }, 1000);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <div>
      <button onClick={handleOpen}>打开对话框</button>
      <Dialog open={open} onClose={handleClose}>
        <InfiniteScroll
          dataLength={data.length}
          next={fetchData}
          hasMore={hasMore}
          loader={<h4>Loading...</h4>}
          endMessage={<p>已加载完所有数据</p>}
        >
          {data.map((item, index) => (
            <div key={index}>{item}</div>
          ))}
        </InfiniteScroll>
      </Dialog>
    </div>
  );
};

export default MyDialog;