Not able to get the target column value on Drag and Drop

I am building a kanban board using ReactJs. The problem is when I move the cards from one column to other, it doesn’t log the target column name onDragEnd. It only logs the source column name onDragStart and onDragEnd.

My code:

const DragDrop = ({ columns, setColumns }) => {
  const user = JSON.parse(localStorage.getItem("profile"));

  const onDragEnd = (targetColumn, card) => {
    if (!user?.result?.name) {
      toast.error("You're not logged in!");
      return null;
    }

    switch (targetColumn) {
      case "Planned":
        console.log(targetColumn, card);
        break;
      case "In-Progress":
        console.log(targetColumn, card);
        break;
      default:
        console.log(targetColumn, card);
    }
  };

  const onDragStart = (sourceColumn) => {
    console.log(sourceColumn);
  };

  return (
    <div className="hidden w-full mt-10 md:grid grid-cols-3 gap-4 lg:gap-8 h-screen px-2 sm:px-5">
      {Object.entries(columns).map(([columnId, column], index) => {
        return (
          <div key={columnId}>
            <h1 className="text-primary-dark font-bold">{`${column.name} (${column.items.length})`}</h1>
            <p className="text-secondary-dark text-sm">{column.subTitle}</p>
            <ul className="mt-6 space-y-4 lg:space-y-6">
              {column.items.map((item, index) => {
                return (
                  <li
                    className={`p-4 mb-4 bg-white rounded-lg border-t-4 cursor-pointer`}
                    draggable
                    onDragStart={() => onDragStart(columnId, item)}
                    onDragEnd={() => onDragEnd(columnId)}
                    key={item._id}
                  >
                     <Card />
                  </li>
                );
              })}
            </ul>
          </div>
        );
      })}
    </div>
  );
};

export default DragDrop;

column data looks like this

const columns = {
  planned: {
    name: "Planned",
    subTitle: "Ideas prioritized for research",
    items: [],
  },
  "in-progress": {
    name: "In-Progress",
    subTitle: "Currently being developed",
    items: [],
  },
  live: {
    name: "Live",
    subTitle: "Released features",
    items: [],
  },
};

Do you want the drop target? Looking at MDN something like this should give it.

return (
  <li
    id={columnId}
    className={`p-4 mb-4 bg-white rounded-lg border-t-4 cursor-pointer`}
    draggable
    onDragStart={() => onDragStart(columnId, item)}
    onDragOver={(event) => event.preventDefault()}
    onDrop={({target}) => onDragEnd(target.id)}
    key={item._id}
  >
    {item}
    {/* <Card /> */}
  </li>
);

I assume you are going to update the object/array based on the drop target?

Thanks for your help, it worked!