I am using react-draggable to drag and drop elements. How should I save the elements positions after dragging? I was trying to save the position to the local storage by using onStop and initializing an eventLogger but it's not saving the position. Here is my code example, i am happy to get some help, as i am pretty new in this topic. Thank you very much.

return (
  <DragDropContext onDragEnd={this.onDragEnd} defaultPosition={{ x: 0, y: 0 }} onStop={eventLogger}>
    <Droppable droppableId="droppable" type="droppableItem">
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          style={getListStyle(snapshot.isDraggingOver)}
        >
          {this.state.items.map((item, index) => (
            <Draggable        
              key={item.id} draggableId={item.id} index={index}>
              {(provided, snapshot) => (
                <div>
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    style={getItemStyle(
                      snapshot.isDragging,
                      provided.draggableProps.style
                    )}
                  >
                    {item.content}
                    <span
                      {...provided.dragHandleProps}
                    >
                      Drag
                    </span>
                    <ServiceCommandUnit
                      subItems={item.subItems}
                      type={item.id}
                    />
                  </div>
                  {provided.placeholder}
                </div>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </DragDropContext>
)