Drag-and-Drop Issue with Dnd-Kit in React: Card Appears Underneath Placeholder Despite High z-index

Question

I'm working on a React project that involves a game board with drag-and-drop functionality. I'm using Dnd-Kit to handle the drag-and-drop interactions. I drag my cards to a specific placeholder. the first drag and drop is working well, but after that while I. drag, the card is under other's placeholders until I drop my mouse. I tried bringing the card to the front without succes

here's my onDragStart code:

const onDragStart = (e: DragStartEvent) => {
    console.log("active", e.active.id);
    const card = document.getElementById(e.active.id as string);
    console.log("card", card);

    if (card) {
      card.className = "absolute z-[2147483647]";
    }
  };

Why is the card appearing underneath the placeholder despite setting a high z-index and position: absolute?

How can I ensure that the dragged card always appears on top of the placeholder?

Any help would be greatly appreciated. Thank you!