I think the issue is you're using data.id
to render but for the delete logic, you're using session.id
data.id
should be session.id
? as you're already using data to map, and have session as a key here:
{data.map((session) => {
...
<li key={data.id}> // typo? session.id*
I think this is the reason why you see changes in the backend, but changes aren't reflected in the front end
also to guarantee latest update, I would utilize with prevData based on the value of the old state of the component:
setData(prevData => prevData.filter(s => s.id !== session.id));