Botão Carregar mais com React js

#React

Estou criando um site e gostaria de colocar paginação com um botão de carregar mais. Estou usando um map para renderizar os itens, mas está dando um erro. Está carregando mais itens do que deveria. Gostaria de saber como eu poderia fazer isso de outra forma e no que estou errando.

import { useState } from "react";
import Produto from "../Components/Produto";
import './ListaProdutos.css';
import { blusas, calcas, camisas, jaquetas, saias, shorts, vestidos } from "./ListaTodosProdutos";


const ListaProdutosHome = () => {


  let listaHome = [];
  let newListaHome = [];


  listaHome = blusas.concat(saias, calcas, blusas, camisas, shorts, vestidos, jaquetas);
  listaHome.sort(function(){return 0.5 - Math.random()});


  
  let [maisItens, setMaisItens] = useState(8);
  const carregarMais = () => {
      setMaisItens(maisItens + 8);
      console.log(maisItens);
  }


  newListaHome = listaHome.slice(0, maisItens);
  
  return (
      <div className="listaDeProdutos">
          <p className="quantidadeItens">{maisItens} itens</p>
          <div className="conteinerProduto">
              {newListaHome.length > 0 && newListaHome.map((value) => <Produto className="caixaProduto" key={value.id} path={value.caminho} nome={value.nome} preco={value.preco} />)}      
          </div> 
          <button id="carregarMais" onClick={carregarMais}>Carregar Mais</button>
      </div>  
  );
};


export default ListaProdutosHome;