Quando clico no botão "carregar mais", ele repete os mesmos pensamentos e não soma os novos

import { PensamentoService } from './../pensamento.service';
import { Component, OnInit } from '@angular/core';
import { Pensamento } from '../pensamento';

@Component({
  selector: 'app-listar-pensamento',
  templateUrl: './listar-pensamento.component.html',
  styleUrls: ['./listar-pensamento.component.css']
})
export class ListarPensamentoComponent implements OnInit {

  listaPensamentos: Pensamento[] = [];
  paginaAtual: number = 1;
  haMaisPensamentos: boolean = true;

  constructor(private service: PensamentoService) { }

  ngOnInit(): void {
    this.service.listar(this.paginaAtual).subscribe((listaPensamentos) => {
      this.listaPensamentos = listaPensamentos
    })
  }

  carregarMaisPensamentos() {
    this.service.listar(++this.paginaAtual)
      .subscribe(listaPensamentos => {
        this.listaPensamentos.push(...listaPensamentos);
        if(!listaPensamentos.length) {
          this.haMaisPensamentos = false
        }
      })
  }
}

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Pensamento } from './pensamento';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class PensamentoService {

  private readonly API = "http://localhost:3000/pensamentos"

  constructor(private http: HttpClient) { }

  listar(pagina: number): Observable<Pensamento[]> {

    const itensPorPagina = 9;

    let params = new HttpParams()
    .set("_page", pagina)
    .set("_limit", itensPorPagina)



    return this.http.get<Pensamento[]>(this.API, {params})

  }

  criar(pensamento: Pensamento): Observable<Pensamento> {
    return this.http.post<Pensamento>(this.API, pensamento)
}

  excluir(id:string): Observable<Pensamento> {
    const url = `${this.API}/${id}`
    return this.http.delete<Pensamento>(url)
  }

  editar(pensamento:Pensamento): Observable<Pensamento> {
    const url = `${this.API}/${pensamento.id}`
    return this.http.put<Pensamento>(url, pensamento)
  }

  buscarPorId(id: string): Observable<Pensamento> {
    const url = `${this.API}/${id}`
    return this.http.get<Pensamento>(url)
  }

}

<section class="container">
  <header class="header d-flex">
    <h2 class="ff-inter">Meu Mural</h2>
    <button routerLink="/criarPensamento" class="botao">Adicionar pensamento</button>
  </header>
  <div class="mural" *ngIf="listaPensamentos.length > 0, else semPensamentos" >
    <div *ngFor = "let pensamento of listaPensamentos">
      <app-pensamento [pensamento]="pensamento"></app-pensamento>

    </div>
  </div>
</section>
  <app-botao-carregar-mais 
  [haMaisPensamentos] = "haMaisPensamentos"
  (click)="carregarMaisPensamentos()">

  </app-botao-carregar-mais>

<ng-template #semPensamentos>
  <div class="ff-inter sem-pensamentos">
<p>Ainda não há pensamentos cadastrados!</p>
 </div>
</ng-template>