How to save the updated stae values back to database(mongo db) in react-dnd

Question

I am a beginner in learning react.js. I have developed a simple todo app using react-dnd. I was able to implement react onDragEnd function where the cards in each column are able to be dragged and dropped within and between columns. However, once I refresh the page the page is reset and all the dragged elements are not saved. Therefore, I want to know, how to permanently save the position of the dragged element in react dnd with backend. Here the names defined under useState as "TO-DO, INPROGRESS,READY" are recognized as keys in retrieving data. Also, stage.staus has the same value (either TO-DO, INPROGRESS OR READY) stored in database sample picture of the frontend

My code:

function ProjectsDashboard() {
  const [state, setState] = useState({
    //creating 3 columns
    "TO-DO": {
      title: "To do",
      items: [item, item2], //temporary data valuesa
    },
    "IN-PROGRESS": {
      title: "In Progress",
      items: [],
    },
    READY: {
      title: "Completed",
      items: [],
    },
  });

  //for retrieval
  const [stages, setStages] = useState("");

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getStages());
  }, [dispatch]);
  const { stage } = useSelector((state) => state.stage);

  const handleDragEnd = (result) => {
    if (!result.destination) return;
    const items = stage;
    const [recordedItem] = items.splice(result.source.index, 1);
    recordedItem.status = result.destination.droppableId;
    items.splice(result.destination.index, 0, recordedItem);
    setStages(items);
    setStages({ status: result.destination.droppableId });
    console.log(stage, "STAGE");
    console.log("STATE");
  };

  return (
    <GridWrapper>
      <div className="PApp">
        <DragDropContext onDragEnd={handleDragEnd}>
          {_.map(state, (data, key) => {
            return (
              <div key={key} className={"column"}>
                {console.log(key, "KEY")}
                <ProjectWrapper className="border">
                  <h3 className="title">{data.title}</h3>
                </ProjectWrapper>
                <Droppable droppableId={key}>
                  {(provided, snapshot) => {
                    return (
                      <div>
                        <div
                          ref={provided.innerRef}
                          {...provided.droppableProps}
                          className={"droppable-col"}
                        >
                          <hr className="line" style={{ opacity: 10 }}></hr>

                          {stage.map((stages, index) => {
                            console.log("map");
                            if (stages.status === key)
                              return (
                                <Draggable
                                  key={stages._id}
                                  index={index}
                                  draggableId={stages._id}
                                  className="drag"
                                >
                                  {(provided, snapshot) => {
                                    console.log(snapshot);
                                    return (
                                      <div
                                        className={`item ${
                                          snapshot.isDragging && "dragging"
                                        }`}
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}
                                      >
                                        {/* card name */}

                                        <button
                                          className="stageDetails"
                                          style={{
                                            padding: "0",
                                            border: "none",
                                            background: "none",
                                          }}
                                          onClick={() => {
                                            setFormData(stages);
                                            dispatch(
                                              getSpecificStages(stages._id)
                                            );
                                            //handleShow();
                                            stageclickPopup(true);
                                          }}
                                        >
                                          {stages.stageName}
                                        </button>
                                        <button
                                          className="btn-delete"
                                          onClick={() => {
                                            deleteS(stages._id);
                                            handleClose();
                                          }}
                                        >
                                          <DeleteOutlinedIcon className="delete" />
                                        </button>
                                      </div>
                                    );
                                  }}
                                </Draggable>
                              );
                          })}
                          {provided.placeholder}
                        </div>
                      </div>
                    );
                  }}
                </Droppable>
              </div>
            );
          })}
        </DragDropContext>
      </div>
    </GridWrapper>
  );
}

export default ProjectsDashboard;