Не могу понять, почему моя переменная useState не показывает ни начальное значение, ни обновленное значение. ⇐ Javascript

[Anonymous]

Я пытаюсь удалить удаленный элемент из пользовательского интерфейса без необходимости его обновления. Элемент успешно удаляется из базы данных, но мне приходится обновить страницу, чтобы увидеть удаление. Даже после передачи updateData в setData данные не будут обновляться. Сессии — это массив, полный элементов, поэтому начальное значение данных не должно быть пустым массивом, однако именно это регистрируется каждый раз, когда я пытаюсь визуализировать данные. Может ли кто-нибудь помочь мне понять, почему? Нужно ли мне реализовывать useEffect? Я пытался, но ничего не изменилось.
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

const ViewSessions = ({ sessions }) => {
const [data, setData] = useState(sessions);
const router = useRouter();

const handleDeleteClick = async (session) => {
try {
await deleteDoc(doc(db, "sessions", session.id));
console.log("Document successfully deleted!");

// Update the local state to remove the deleted session
const updatedData = data.filter((s) => s.id !== session.id);
setData(updatedData);
} catch (error) {
console.error("Error deleting document:", error);
}
};

console.log("sessionsData updated:", data);
console.log("sessions", sessions)

return (

Sessions

• {data.map((session) => {
  return (
• handleDeleteClick(session)}>Delete
  
  );
  })}

);
};


Подробнее здесь: https://stackoverflow.com/questions/793 ... alue-nor-t