Drag and drop list using react-beautiful-dnd

Question

I have a component and i have used react-beautiful-dnd for dragging but the drag is not working and it throws a console message when we are trying to drag "Unable to find draggable with id: project2" this changes if we drag with project 1, project 3 etc. This is my code:-

  const handleDragEnd = (result) => {
if (!result.destination) return; // Return if the item was dropped outside of a droppable area

const { source, destination } = result;

// Reorder projects within the same column
if (source.droppableId === destination.droppableId) {
  setProjects((prevProjects) => {
    const reorderedProjects = Array.from(prevProjects);
    const [movedProject] = reorderedProjects.splice(source.index, 1);
    reorderedProjects.splice(destination.index, 0, movedProject);
    storeProjectsAndIssues(reorderedProjects); // Update the project order in localStorage
    return reorderedProjects;
  });
}
};

 <DragDropContext onDragEnd={handleDragEnd}>
    <Droppable
      droppableId="kanban-board"
      direction="horizontal"
      type="column"
    >
      {(provided) => (
        <div
          className="kanban-board"
          {...provided.droppableProps}
          ref={provided.innerRef}
        >
          {projects.map((project, index) => (
            <Draggable
              key={project?.id}
              draggableId={project?.id}
              index={index}
            >
              {(provided, snapshot) => (
                <div
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  ref={provided.innerRef}
                  className="kanban-column"
                  style={{
                    // Add styles to indicate dragging
                    ...provided.draggableProps.style,
                    boxShadow: snapshot.isDragging
                      ? "0 4px 8px rgba(0, 0, 0, 0.1)"
                      : "none",
                    transform: snapshot.isDragging ? "scale(1.05)" : "none",
                  }}
                >
                  <h2 {...provided.dragHandleProps}>
                    {editingProjectId === project?.id ? (
                      <div>
                        <input
                          type="text"
                          value={project?.name}
                          onChange={(e) => handleEditFieldChange(project?.id, "name", e.target.value)}
                        />
                        <input
                          type="text"
                          value={project?.status}
                          onChange={(e) => handleEditFieldChange(project?.id, "status", e.target.value)}
                        />
                        <input
                          type="text"
                          value={project?.assignee}
                          onChange={(e) => handleEditFieldChange(project?.id, "assignee", e.target.value)}
                        />
                        {/* Add more input fields for other project details */}
                      </div>
                    ) : (
                      <div>
                        <h5>Name: {project?.name}</h5>
                        <h5>Status: {project?.status}</h5>
                        <h5>Assignee: {project?.assignee}</h5>                   
                        {/* Display other project details as needed */}
                      </div>
                    )}
                   <button onClick={() => handleDeleteProject(project?.id)}>Delete Project</button>
                  </h2>

                  {project?.issues.map((issue, issueIndex) => (
                    <div key={issue?.id} className="kanban-card">
                      <h3>Issue :{issue?.title}</h3>
                      <h3>Priority :{issue?.priority}</h3>
                      {/* Add more issue details if needed */}
                    </div>
                  ))}
                  {editingProjectId === project?.id ? (
                    <button onClick={handleSaveProject}>Save</button>
                  ) : (
                    <button onClick={() => handleEditProject(project?.id)}>
                      Edit Project
                    </button>
                  )}
                </div>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </DragDropContext>

This is my component i am trying to display kanban cards and drag them but as i said the drag feature is not working.