Unexpected behaviour when updating entity with Firebase RealTimeDB+Redux Toolkit

Question

I am building a kanban board. When I move a card from one lane to another, I expect the card to be updated with dropped lane_id; however, either my cards become duplicates or do not update as expected.

Here's my code;

My slice

const updateCard= async (endpoint= '',updatedCard:Card)=>{


  try{
    update(ref(db, 'kanbanBoard/cards/' + updatedCard.id), updatedCard)
    .then(() => {
      // Data saved successfully!
      console.log("updatedcard: ",updatedCard)
    })
    .catch((error) => {
      // The write failed...
      console.error('error update',error);
      
    });
  }
  catch(error){

    console.error(error);
  }
}

export const updateCardDataThunk=createAsyncThunk(

'data/updateCardData',
async(updatedCard:Card,thunkAPI)=>{

  await updateCard("/kanbanBoard/cards",updatedCard);
  
}
); 

here's my update function;

const dropped = (e: PointerEvent, c: Card) => {
    const theElement = window.document
      .elementsFromPoint(e.clientX, e.clientY)
      .filter((element) => element.classList.contains("laneitem"))[0];

    const laneId = theElement?.id;
    if (!laneId) {
      console.log("moved to nowhere");
    } else {
      const updated = { ...c, lane_id: Number(laneId) };
     
      dispatch(updateCardDataThunk(updated)).then((action) => {
        console.log("action: ", action);

      });
    }
  };