cards dont always jump to make space for a new card when reordering list

Question

I am currently trying to implement a drag and drop in a project of mine! I have this strange thing happen sometimes where after I moved cards around once or twice and I try and move another one, it won`t always make space for it! I am not exactly sure why this is happening.

My current reorder logic only works within lists, I am yet to finish the drag and drop to a different list.

I have three files for the actual workspace area, the lists, and the cards!

The workspace area code:

  <div className="flex w-full h-full overflow-x-auto items-start py-5 px-5 gap-5">
    <DragDropContext onDragEnd={handleDragEnd}>
      {lists.map((list: any, key: any) => (
        <Lists
          showCardDetails={toggleCardDetails}
          key={list.uuid}
          name={list.title}
          id={list.uuid}
        />
      ))}
      ....some other code here
        
      )}
    </DragDropContext>
  </div>

The lists code:

  <div ref={listRef} className="overflow-y-hidden py-1">
    <Droppable droppableId={id} direction="vertical">
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.droppableProps}
          className="flex flex-col items-center h-full  px-1"
        >
          {filteredCards.length !== 0 ? (
            filteredCards
              ?.sort((a, b) => a.position - b.position)
              ?.map((card: any) => (
                <Cards
                  key={card.uuid}
                  name={card.title}
                  position={card.position}
                  index={card.cardIndex}
                  showCardDetails={() => {
                    setCardDetails(card), showCardDetails();
                  }}
                />
              ))
          ) : (
            <div className="h-[20px]">{""}</div>
          )}
          
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </div>

Cards component code:

<Draggable draggableId={`${index}`} index={index} key={index}>
      {(provided) => (
        <div
          className="w-60 rounded-md border-solid mt-2 border-2 py-2 hover:border-blue-500 hover:border-2 shadow-sm border-border bg-cards px-2  items-center overflow-x-hidden text-wrap flex relative"
          style={{
            minWidth: "242px",
            minHeight: "80px",
            ...provided.draggableProps.style,
          }}
          onClick={showCardDetails}
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <div style={{ marginRight: "24px" }}>{name}</div>
        </div>
      )}
    </Draggable>

This is my first large project since i started taking more seriously in the last few months, so I am still learning a lot...but I am stuck and I can`t seem to figure out the problem.

The full repo can be found @ https://github.com/kikiou1991/WizardBoards

Any help would be much appreciated!