Order documents in firestore based on their drag and drop position

Question

My goal is to render my LinkContainer components in order that they are in my drag and drop context:

<DragDropContext onDragEnd={handleOnDragEnd}>
          <Droppable droppableId="characters">
            {(provided) => (
              <ul
                className="characters"
                {...provided.droppableProps}
                ref={provided.innerRef}
              >
                {links.map((l, index) => {
                  return (
                    <Draggable key={l.id} draggableId={l.id} index={index}>
                      {(provided) => (
                        <li
                          className="draggable"
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          ref={provided.innerRef}
                        >
                          <LinkContainer
                            linkTitle={l.linkTitle}
                          />
                        </li>
                      )}
                    </Draggable>
                  );
                })}
              </ul>
            )}
          </Droppable>
        </DragDropContext>

Here is the function that allows me to drag and drop while also setting links to the new order:

 const reorder = (links, startIndex, endIndex) => {
    const result = Array.from(links);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
  };

  // handle drag end
  const handleOnDragEnd = (result) => {
    console.log(result);
    setLinks(reorder(links, result.source.index, result.destination.index));
  };

How can I update my firebase records so that the LinkContainer's render in the last order when mapping through links on a page reload?

Do I have to create an index on the document itself and update that with the position of the LinkContainer