React-beautiful-dnd unable to persist to DB(mySQL)

[klang812]

I am currently working on a project for work and we are going from backbone.js to React. I have added the react-beautiful-dnd library for a section of the site. I am able to drag and drop but when I refresh the list goes back to its default state. We are using mySQL and would like to persist the changes to the DB. If anyone has any information on how to make this happen that would be great. Here is the return and below the onDragEnd method:

return (
    <div>
      { storyElements.length
        ? (
          <div>
            {/* this Modal component is only here for manual QA */}
            <AddElementsModal addElement={addElement} />
            <DragDropContext onDragEnd={handleOnDragEnd}>
            <div>
              <Droppable droppableId='storyElementsDropZone'>
                {provided => (
                  <div {...provided.droppableProps} ref={provided.innerRef}>
                  { storyElements.map((element, index) => (
                    <Draggable key={element.id} draggableId={element.uuid} index={index}>
                      {(provided) => (
                        <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                          {componentByElementType(element)}
                        </div>
                      )}
                    </Draggable>
                    ))}
                    {provided.placeholder}
                  </div>
                )}
              </Droppable>
            </div>
            </DragDropContext>
          </div>
        )
        : (
        <div>
          <AddElementsModal addElement={addElement} />
        </div>
        )}
  </div>
  );
};

const handleOnDragEnd = (result) => {
    const { destination, source } = result;
    // if dropped outside
    if (!result.destination) {
      return;
    }
    // if dropped in same place
    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }
    // get storyElements array
    const newStoryElements = [...storyElements];
    // get the draggedStoryElement
    const draggedStoryElement = newStoryElements[result.source.index];
    // delete storyElement from source position and insert into destination position
    newStoryElements.splice(result.source.index, 1);
    newStoryElements.splice(result.destination.index, 0, draggedStoryElement);
    
    setStoryElements(newStoryElements);
  };

Thank you in advance,

Kerry