Need Help or Advice to do HandleEnd and Node Match.

[FemKSD-Dev]

I try to create dynamics board and reuseable component in nextJS depend on RestAPI then I have a some problem and question.

1. When board empty, I'm recieve "The number of enabled nodes does not match the number of values." in console web dev tools.
2. I don't know how to classifie board when move card and drop end. In docs example that so hard to apply for me.

This coding in component

'use client'

import { animations, handleEnd as coreHandleEnd, handleEnd,
  parents,
  parentValues,
  dragValues,
  setParentValues,
} from '@formkit/drag-and-drop';
import { useDragAndDrop } from "@formkit/drag-and-drop/react";
import IssueCard from "./IssueCard";
import { useEffect, useRef } from "react";


interface CardBoardProps {
  data: any[];
  group: string;
  target: string;
  value: string;
}

export default function CardBoard(params: CardBoardProps) {

  const [itemList, items, setItems] = useDragAndDrop<HTMLUListElement, any>( params.data,
    {
      group: params.group,
      plugins: [animations()],
      handleEnd: (data) => {
        const targetParentValues = parentValues(
          data.targetData.parent.el,
          data.targetData.parent.data
        );
        updateCard(data);
        coreHandleEnd(data);
      },
    }
  );


  useEffect(() => {
    if (params.data && params.data.length > 0) {
      params.data.sort((a, b) => a.seq - b.seq);
      setItems(params.data);
    } else {
      setItems([]);
    }
  }, [params.data, setItems]);

  const updateCard = async (data: any) => {
    console.log("data", data);
    const card = data.targetData.node.data.value;
    console.log("card", card);

    const newIndex = data.targetData.node.data.index;
    console.log("newIndex", newIndex);

    const parent = data.targetData.parent;
    console.log("parent", parent);

    console.log("parent.data.getValues()", parent.data.getValues());

    const tasksOfParentColumn = parent.data.enabledNodes.length;
    console.log("tasksOfParentColumn", tasksOfParentColumn);
  };

  return (
    <ul ref={itemList} className={`${params.target}Board value${params.value} item-list flex flex-col gap-3 bg-white p-4 rounded-lg border border-purple-500`}>
      {items.length > 0 ? (
        items
          .map((item) => (
            <IssueCard key={item.id} {...item} />
          ))
      ) : (
        <div className="flex items-center justify-center bg-white py-10 rounded-lg border border-gray-500 border-dotted min-w-72 max-w-72">
          <p className="text-xs font-bold text-gray-500">Drop Here!</p>
        </div>
      )}
    </ul>
  );
}

Example use my project

'use client';

import React, { useEffect, useState } from "react";
import CardBoard from "@/components/CardBoard"; // Adjust the path if needed

export default function MyComponent() {
  const [ticketData, setTicketData] = useState<any[]>([]);
  const [doneData, setDoneData] = useState<any[]>([]);

  useEffect(() => {
    const fetchTickets = async () => {
      try {
        const response = await fetch("http://localhost:3001/api/ticket/");
        const result = await response.json();
        if (Array.isArray(result.data)) {
          const openTickets = result.data.filter((ticket: any) => ticket.status.name === 'Open');
          const doneTickets = result.data.filter((ticket: any) => ticket.status.name === 'Done');
          setTicketData(openTickets);
          setDoneData(doneTickets);
        }
      } catch (error) {
        console.error("Error fetching tickets:", error);
      }
    };

    fetchTickets();
  }, []);

  return (
    <div className="board flex h-screen p-4 gap-4">
      {/* Open tickets board */}
      <CardBoard data={ticketData} target="status" value="Open" group="adminList"/>

      {/* Done tickets board */}
      <CardBoard data={doneData} target="status" value="Done" group="adminList"/>
    </div>
  );
}