I’m working on an Angular application and I have a function called deleteComptable that’s supposed to delete comptables from Firestore. However, when I click the “delete” button that calls this function, the corresponding comptable gets removed from the list displayed in my application, but it’s still present in the Firestore database and reappears when I refresh the page.

The code for deleteComptable is:

async deleteComptable(comptable: DocumentData) {
  const firestore = getFirestore();
const comptableRef = doc(firestore, 'comptables', comptable['cin']);
  await deleteDoc(comptableRef);
  console.log('Comptable deleted:', comptable);

  // Update UI after deletion
  const index = this.CompArray.findIndex(item => item['cin'] === comptable['cin']);
  if (index > -1) {
    this.CompArray.splice(index, 1);
  }
}