Drag and drop in React-Beautiful-DnD sometimes fails to function

Question

I developed a ticket management system using the React-beautiful-dnd lib, and each ticket has three statuses: pending, processing, and complete. All data is retrieved from the backend and cards are shown in the appropriate column. The issue I'm having is that only the drag pointer appears when I drag a card, and when I change a card from Pending to Processing, it sometimes moves to the column but takes some time, and sometimes it doesn't even if the drag pointer appears when dragging to the column. There are also no error messages when dragging. Sometimes only the text will select without draging.

const [tickets, setTickets] = useState([]);

function onDragEnd(result) {
    if(!result.destination){
      return;
    }

    const sourceIndex = result.source.index;
    const destinationIndex = result.destination.index;

    if(sourceIndex === destinationIndex){
      return;
    }

    const ticketToUpdate = tickets[sourceIndex];
    const updatedTickets = Array.from(tickets);
    updatedTickets.splice(sourceIndex, 1);
    updatedTickets.splice(destinationIndex, 0, ticketToUpdate);

    setTickets(updatedTickets);

    updateTicketStatus(ticketToUpdate._id, result.destination.droppableId);
  }

  return (
    <>
      <div style={styles.backgroundGreen}></div>
      <Header />
      <main style={styles.main}>
        <H3 style={styles.topic}>Support Ticket Managment</H3>
        <div style={styles.container}>
          <DragDropContext onDragEnd={onDragEnd}>
          <div style={styles.column}>
            <H4 style={styles.columnTopic}>Pending</H4>
            <Droppable droppableId='Pending'>
              {(provided) => (
                <ul
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  style={styles.ul}
                >
                  {tickets
                    .filter((ticket) => ticket.status === "Pending")
                    .map((ticket, index) => (
                      <Draggable key={ticket._id} draggableId={ticket._id} index={index}>
                        {(provided) => (
                        <li
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          style={styles.card}
                        >
                          <H9>ID: {ticket._id}</H9>
                          <H9>UserEmail: {ticket.userEmail}</H9>
                          <H9>Name: {ticket.name}</H9>
                          <H9>Contact Number: {ticket.number}</H9>
                          <H9>Issue: {ticket.issue}</H9>
                          <H9>Description: {ticket.description}</H9>
                          <H9>Status: {ticket.status}</H9>
                          <button onClick={() => deleteTicket(ticket._id)}>Delete</button>
                        </li>
                      )}
                      </Draggable>
                    ))}
                    {provided.placeholder}
                </ul>
              )}
            </Droppable>
          </div>
          <div style={styles.column}>
            <H4 style={styles.columnTopic}>Processing</H4>
            <Droppable droppableId='Processing'>
              {(provided) => (
                <ul
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  style={styles.ul}
                >
                  {tickets
                    .filter((ticket) => ticket.status === "Processing")
                    .map((ticket, index) => (
                      <Draggable key={ticket._id} draggableId={ticket._id} index={index}>
                        {(provided) => (
                        <li
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          style={styles.card}
                        >
                          <H9>ID: {ticket._id}</H9>
                          <H9>UserEmail: {ticket.userEmail}</H9>
                          <H9>Name: {ticket.name}</H9>
                          <H9>Contact Number: {ticket.number}</H9>
                          <H9>Issue: {ticket.issue}</H9>
                          <H9>Description: {ticket.description}</H9>
                          <H9>Status: {ticket.status}</H9>
                          <button onClick={() => deleteTicket(ticket._id)}>Delete</button>
                        </li>
                      )}
                      </Draggable>
                    ))}
                    {provided.placeholder}
                </ul>
              )}
            </Droppable>
          </div>
          <div style={styles.column}>
            <H4 style={styles.columnTopic}>Complete</H4>
            <Droppable droppableId='Complete'>
              {(provided) => (
                <ul
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  style={styles.ul}
                >
                  {tickets
                    .filter((ticket) => ticket.status === "Complete")
                    .map((ticket, index) => (
                      <Draggable key={ticket._id} draggableId={ticket._id} index={index}>
                        {(provided) => (
                        <li
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          style={styles.card}
                        >
                          <H9>ID: {ticket._id}</H9>
                          <H9>UserEmail: {ticket.userEmail}</H9>
                          <H9>Name: {ticket.name}</H9>
                          <H9>Contact Number: {ticket.number}</H9>
                          <H9>Issue: {ticket.issue}</H9>
                          <H9>Description: {ticket.description}</H9>
                          <H9>Status: {ticket.status}</H9>
                          <button onClick={() => deleteTicket(ticket._id)}>Delete</button>
                        </li>
                      )}
                      </Draggable>
                    ))}
                    {provided.placeholder}
                </ul>
              )}
            </Droppable>
          </div>
          </DragDropContext>
        </div>
      </main>
      <Footer />
    </>
  );
}

There was a error draging the card since the next js server side rendering. I overcome that issue adding the following changes to the code.

const DragDropContext = dynamic(
  () =>
    import('react-beautiful-dnd').then(mod => {
      return mod.DragDropContext;
    }),
  {ssr: false},
);
const Droppable = dynamic(
  () =>
    import('react-beautiful-dnd').then(mod => {
      return mod.Droppable;
    }),
  {ssr: false},
);
const Draggable = dynamic(
  () =>
    import('react-beautiful-dnd').then(mod => {
      return mod.Draggable;
    }),
  {ssr: false},
);