How to render blocks of data from Fetch resource whitout re-render what is already in the screen?

Question

I'm consuming an API, and it returns an array whit length of 370. I want to start rendering only 15, and then, when the user scroll down, render more 15, and so on... PS: The part of getting the viewport height is fine, I already know how to do it. So, focus on the React rendering function only. That's what I have so far, rendering the first 15 items:

export const GamesPage = () => {
  const [data, setData] = useState([]);

  async function getData() {
    const options = {
      method: 'GET',
      url: 'https://free-to-play-games-database.p.rapidapi.com/api/games',
      params: { 'sort-by': 'popularity' },
      headers: {
        'X-RapidAPI-Host': 'free-to-play-games-database.p.rapidapi.com',
        'X-RapidAPI-Key': 'MY_KEY',
      },
    };

    axios
      .request(options)
      .then(function (response) {
        setData(response.data);
      })
      .catch(function (error) {
        console.error(error);
      });
  }

  useEffect(() => {
    getData();
  }, []);

const renderList = () => {
    let reducedArray = [];
    for (let i = 0; i < 15; i++) {
      reducedArray.push(data[i]);
    }

    return reducedArray.map(game => (
      <Col key={game.id} sm={12} md={3} lg={3}>
        <a className='link' href={game.game_url}>
          <Card className='shadow grow bg-dark mb-4'>
            <Card.Img src={game.thumbnail} />
            <Card.Body>
              <Card.Title>
                <p className='c-limit'>{game.title}</p>
                <span className='float-right badge'>Free</span>
              </Card.Title>
            </Card.Body>
          </Card>
          
        </a>
      </Col>
    ));
  };

  return (
      {data.length && renderList()}
  )
}