reactjs – filter an array with hooks react js

I am designing a booking page with react js and firebase; each document of the “reservation” collection corresponds to a reservation (each document contains the date of the reservation, time, and email of the person who booked).

Whenever a date is selected from the “calendar” element, it always gets all the available times from firebase and inserts them in an array called listHours (it uses hooks); subsequently, it retrieves the documents in the “reservation” collection where the “date” field is equal to the date selected on the calendar.

At this point, once the latter has been recovered, it should delete the docs already present in querySnapshot with the filter function, the problem is that the latter does not do its duty:

If for example there are already two reservations it only deletes the time of the first booking that he finds on firestore from the available times, leaving all the others visible

Do you have other methods or alternative solutions?

This is the code of the function:

const onSelectData = async (date) => {
  await fetchData(); //function that retrieves all the available hours of the structure
  date = date.substring(0, 10); //I format the date keeping only year-month-day
  setData(date);
  //I recover the documents with the selected date
  const q = query(collection(db, 'reservation'), where('data', '==', date));
  //querySnapshot has all reservations for that date
  const querySnapshot = await getDocs(q);

  //I delete the documents from the total list of times the times already occupied
  querySnapshot.forEach((doc) => {
    setlistHours(listHours.filter((item) => item.time !== doc.data().time));
  });
};