filter работает криво. Вместо удаления объектов заменяет их местами

У меня есть компонент со списками лайкнутых пользователей, при нажатии на кнопку удаления, удаляется конкретный элемент. Но при поторном удалении уже другого объекта все элементы в массиве начинают менятся местами, включая уже удаленный объект. То есть я на жимаю на кнопку удаления и в том объекте меняется пользователь с удаленный поочередно.

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import deleteImg from "../../../images/liked/close.svg";
import messageImg from "../../../images/liked/message.svg";
import BottomMenu from "../BottomMenu";

const Liked = () => {
  const [isEmpty, setIsEmpty] = useState(true);
  const [newArr, setNewArr] = useState([]);
  const [deletedId, setDeletedId] = useState("");
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const getLiked = localStorage.getItem("liked")
      ? JSON.parse(localStorage.getItem("liked"))
      : false;

    setUsers(getLiked);
  }, []);

  useEffect(() => {
    users ? setIsEmpty(false) : setIsEmpty(true);
  }, [users]);

  function removeDuplicates(arr) {
    const result = [];
    const duplicatesIndices = [];

    // Перебираем каждый элемент в исходном массиве
    arr.forEach((current, index) => {
      if (duplicatesIndices.includes(index)) return;

      result.push(current);

      // Сравниваем каждый элемент в массиве после текущего
      for (
        let comparisonIndex = index + 1;
        comparisonIndex < arr.length;
        comparisonIndex++
      ) {
        const comparison = arr[comparisonIndex];
        const currentKeys = Object.keys(current);
        const comparisonKeys = Object.keys(comparison);

        // Проверяем длину массивов
        if (currentKeys.length !== comparisonKeys.length) continue;

        // Проверяем значение ключей
        const currentKeysString = currentKeys.sort().join("").toLowerCase();
        const comparisonKeysString = comparisonKeys
          .sort()
          .join("")
          .toLowerCase();
        if (currentKeysString !== comparisonKeysString) continue;

        // Проверяем индексы ключей
        let valuesEqual = true;
        for (let i = 0; i < currentKeys.length; i++) {
          const key = currentKeys[i];
          if (current[key] !== comparison[key]) {
            valuesEqual = false;
            break;
          }
        }
        if (valuesEqual) duplicatesIndices.push(comparisonIndex);
      } // Конец цикла
    });
    return result;
  }

  // const filteredList = [...new Set(users.map(JSON.stringify))].map(JSON.parse);

  useEffect(() => {
    const newArr = removeDuplicates(users).filter(
      (item) => item.id !== deletedId
    );

    setNewArr(newArr);
  }, [deletedId, users]);

  const year = new Date().getFullYear();

  console.log(deletedId);

  return (
    <div className="liked">
      <div className="liked__container">
        <div className="liked__content">
          <div className="liked__header">
            <h1>Liked</h1>
            <p>Here are all the people you've ever liked.</p>
          </div>

          <ul className="liked__list">
            {!isEmpty ? (
              newArr.map((data) => (
                <div
                  className="liked__item"
                  style={{ backgroundImage: `url(${data.picture})` }}
                  key={data.id}
                >
                  <div className="liked__item-container">
                    <Link
                      className="liked__item-info"
                      to={`/datingapp/main/user/${data.id}`}
                    >
                      <h2>
                        {data.firstName} {data.lastName},{" "}
                        {year - data.birthyear}
                      </h2>
                    </Link>

                    <div className="liked__item-control-panel">
                      <div
                        className="liked__item-delete"
                        onClick={() => setDeletedId(data.id)}
                      >
                        <img src={deleteImg} alt="delete" />
                      </div>
                      <div className="liked__item-message">
                        <img src={messageImg} alt="message" />
                      </div>
                    </div>
                  </div>
                </div>
              ))
            ) : (
              <div className="liked__empty">Array is empry :(</div>
            )}
          </ul>
        </div>
      </div>

      <div style={{ marginTop: "10rem" }}>
        <BottomMenu />
      </div>
    </div>
  );
};

export default Liked;