$update Is Not Working Correctly

I have a list Items can be deleted with Swipeout. I don’t really delete these. I update messages every 5 seconds. But the ones I deleted from the list are not added again.

There is such a build:

let mails = [];

// It works when the swipeout delete is triggered.
const onMailDeleted = maild => {
    // Do Nothing.
}

const updateMails = () => {
    getMails().then(onMails);
}

const onMails = res => {
    mails = res.data;
    // It does not restore deleted mails, but new messages are added.
    $update();
}

const eachMails = () => {
    return mails.map(mail => $h`...`);
}

setTimeout(upadateMails, 5000);

return $h`
    <ul>
        ${eachMails()}
    </ul>
`;

I want to tell a little.

The starting point of the problem was that after deleting a mail with Swipeout, two were deleted instead of one. But if we look at the variable holding the mails, only one was deleted, the extra deleted was not rendered again.

After giving the id attribute to the li tags, it now works correctly and does not delete an extra li tag. This is good news. Now the desired mail is deleted, nothing more.