I have 3 lists of items (users1, user2, users3) displayed as slider items. Each item is an object. An item looks like:

activity_status: "online"
id: "62d0ca6b114db3d"
is_favorite: false
last_login_at: "2022-07-18T02:09:49.458Z"
match_status: null
review_count: 0

I use useQuery to update status for each item in a slider. It's look like:

const {
    data: users1,
    refetch: refetchUsers1,
    isLoading: isLoading1,
  } = useQuery(
    REACT_QUERY_KEYS.USER1,
    async () => {
      setIsLoading(false);
      const res = await getUsers1(LIMIT);
      return res?.items;
    },
    {
      refetchOnWindowFocus: false,
    },
  );
  const {
    data: users2,
    refetch: refetchUser2,
    isLoading: isLoading2,
  } = useQuery(
    REACT_QUERY_KEYS.USER2,
    async () => {
      setIsLoading(false);
      const res = await getUsers2(LIMIT);
      return res?.items;
    },
    {
      refetchOnWindowFocus: false,
    },
  );
  const {
    data: users3,
    refetch: refetchUsers3,
    isLoading: isLoading3,
  } = useQuery(
    REACT_QUERY_KEYS.USER3,
    async () => {
      setIsLoading(false);
      const res = await getUserNewMembers(LIMIT);
      return res?.items;
    },
    {
      refetchOnWindowFocus: false,
    },
  );

But there is a problem when an Item can appear in multiple lists (sliders), and I wanna when I edit the state in the item (exp: is_favorite: false -> true) it will update automatically all version of that item in every other list (slider). I was recommended use webSocket but I don't know exactly how to use it.