Как я могу правильно реализовать load more в react

У меня есть вот такой код и он выдает по 12 объектов которые я перебираю

class PokemonList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            pokemonList: [],
            apiTemplateUrl: "https://pokeapi.co/api/v2/pokemon?offset={number}&limit=12"
        }
        this.loadMore()        
    }

    loadMore=()=>{
        let num = 0;
        let apiTemplateUrl = this.state.apiTemplateUrl;
        let apiUrl = apiTemplateUrl.replace("{number}",num)
            fetch('https://pokeapi.co/api/v2/pokemon?offset=0&limit=12')
            .then((response) => {
                return response.json();
            })
            .then((listPokemons) => {
                listPokemons.results.forEach((aboutPokemon) => {
                    let aboutPokemonUrl = aboutPokemon.url;
                    fetch(aboutPokemonUrl)
                    .then((response) => {
                        return response.json();
                    })
                    .then((pokeData) => {
                        this.setState(prevState => ({
                            pokemonList: [...prevState.pokemonList, pokeData]
                          }))
                    })
                 })
            })
        }

Компонент с кнопкой load more

    render() {
        return (
            <div className="load-more">
                <button onClick={()=>this.props.loadMore()}>Load More</button>
            </div>
        );
    }

для того чтоб мне вивело следующие 12 мне нужно здесь заменить 0 на 12 и поменять fetch https://pokeapi.co/api/v2/pokemon?offset=0&limit=12

Но как мне сделать ето правильно