how to limit the data shown in react-infinite-scroll

Question

I try to use react-infinite-scroll-component to show some data cards but I don't understand how to show some data only in view in this case I display all data, how to solve this

here is my code

  const AllTrainingEvent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const nextData = () => {
    if (loading) return;
    setLoading(true);

    setTimeout(() => {
      const newData = dataCard.slice(0, data.length + 1);
      setData([...dataCard, ...newData]);
      setLoading(false);
    }, 1000);
  };

  return (

here is the use of react-infinite-scroll

        <InfiniteScroll
                  dataLength={data.length}
                  hasMore={data.length < 5}
                  next={nextData}
                  loader={<h4 style={{ textAlign: "center" }}>Loading...</h4>}
                  endMessage={
                    <p style={{ textAlign: "center" }}>
                      <Divider>Yay! You have seen it all</Divider>
                    </p>
                  }
                  style={{
                    maxHeight: 350,
                    overflow: "inherit",
                  }}
                >
    
    
              <List
                dataSource={dataCard}
                renderItem={(item) => (
                  <List.Item>
                    <Row justify="space-between">
                      <Col>
                        <CardTrainingEvent {...item} />
                      </Col>
                    </Row>
                  </List.Item>
                )}
              />
            </InfiniteScroll>
 );
};