React и вывод елементов

import React from "react";
import {
    Link
}
from "react-router-dom";
export function Games() {
    let [game, setGame] = React.useState([])
    let fetchGames = async() => {
        let response = await fetch('https://api.sampleapis.com/switch/games');
        let json = await response.json()
        setGame(json)
    }
    React.useEffect(() => {
        fetchGames()
    }, [])
    return ( < > < h2 > Games < /h2> < div className = 'all_games' > {
        game.map(el => < Link to = {
            `/games/${el.id}`
        } > < div className = 'different_game' > {
            el.name
        } < /div></Link > )
    } < /div> < />)
}

export function Games({ limitProp = 30 }) { // limitProp - из родителя присылаем сколько хотим отображать или 30 по дефолту
  const [games, setGames] = React.useState([]);
  
  const fetchGames = React.useCallback(async (limit, start) => {
    const response = await fetch(`https://api.sampleapis.com/switch/games?limit=${limit}&start=${start}`);
    const json = await response.json()
    setGame((state) => [...state, ...json]); // добавляем новые записи к старым (append)
  }, [setGame]);
 
  // событие при котором нужно подгружать ещё записи, для простоты просто кнопку сделаем, но можно слушать скролл и т.п.
  const onClick = React.useCallback((event) => {
    event.preventDefault();
    fetchGames(limitProp, games.length);
  }, [limitProp, fetchGames, games]);
  
  React.useEffect(() => {
    fetchGames(limitProp, 0);
  }, [limitProp, fetchGames]);
 
  return (
    <>
      <h1>Games</h1>
      {games.map(game => ( // просто для примера
        <a key={game.id} href={`/games/${game.id}`}>{game.name}</a>
      ))}
      <button onClick={onClick}>Load more...</button>
    </>
  );
}