Need help with useOptimistic()

"use client";

import { api } from "@/trpc/react";
import React, { startTransition, useOptimistic } from "react";

const LastList = () => {
  const { data, isLoading } = api.checklist.getLastList.useQuery();
  const { mutateAsync: toggleItem } = api.checklist.toggleItem.useMutation();

  const [optimisticItems, setOptimisticItems] = useOptimistic(
    data?.checklistItems ?? [],
    (items, { id, completed }) =>
      items.map((item) =>
        item.id === id ? { ...item, completed } : item
      )
  );

  const handleChange = async (id: string, completed: boolean) => {
    startTransition(async () => {
      await toggleItem({ id, completed });
      setOptimisticItems({ id, completed });
    });
  };

  return (
    <>
      {!isLoading && data && (
        <div className="card w-96 bg-base-300 text-start shadow-xl">
          <div className="card-body flex flex-col gap-6">
            <h2 className="card-title">{data.name}</h2>
            <div className="flex flex-col gap-2">
              {optimisticItems.map((e) => (
                <div className="flex justify-between" key={e.id}>
                  <p className={e.completed ? "line-through" : ""}>{e.name}</p>
                  <input
                    type="checkbox"
                    checked={e.completed}
                    className="checkbox checkbox-primary"
                    onChange={() => handleChange(e.id, !e.completed)}
                  />
                </div>
              ))}
            </div>
            <button className="btn btn-primary text-lg">+ New task</button>
          </div>
        </div>
      )}
    </>
  );
};

export default LastList;

"use client";

import { api } from "@/trpc/react";
import React, { startTransition, useOptimistic } from "react";

const LastList = () => {
  const { data, isLoading } = api.checklist.getLastList.useQuery();
  const { mutateAsync: toggleItem } = api.checklist.toggleItem.useMutation();

  const [optimisticItems, setOptimisticItems] = useOptimistic(
    data?.checklistItems ?? [],
    (items, { id, completed }) =>
      items.map((item) =>
        item.id === id ? { ...item, completed } : item
      )
  );

  const handleChange = async (id: string, completed: boolean) => {
    startTransition(async () => {
      await toggleItem({ id, completed });
      setOptimisticItems({ id, completed });
    });
  };

  return (
    <>
      {!isLoading && data && (
        <div className="card w-96 bg-base-300 text-start shadow-xl">
          <div className="card-body flex flex-col gap-6">
            <h2 className="card-title">{data.name}</h2>
            <div className="flex flex-col gap-2">
              {optimisticItems.map((e) => (
                <div className="flex justify-between" key={e.id}>
                  <p className={e.completed ? "line-through" : ""}>{e.name}</p>
                  <input
                    type="checkbox"
                    checked={e.completed}
                    className="checkbox checkbox-primary"
                    onChange={() => handleChange(e.id, !e.completed)}
                  />
                </div>
              ))}
            </div>
            <button className="btn btn-primary text-lg">+ New task</button>
          </div>
        </div>
      )}
    </>
  );
};

export default LastList;