Как изменять позицию элемента в списке?

Question

[dotnetlooper]

Нужно изменить порядок записей с помощью перетаскивания. Для этого использовал react-dnd. Все отлично, но проблема в том, что эти изменения происходят на клиентской части. А мне нужно изменять позиции и на сервере. Куда мне и как передавать позиции? К примеру, у кажой записи есть аттрибут => position.

Логика компонента:

function Note({ id, index, date, title, description, thumbnail, moveNote }) {
    const ref = useRef(null);
    const [{ handlerId }, drop] = useDrop({
        accept: 'note',
        collect(monitor) {
            return { 
                handlerId: monitor.getHandlerId()
            }
        },
        hover(item, monitor) {
            if (!ref.current) {
                return;
            }
            const dragIndex = item.index;
            const hoverIndex = index;
            if (dragIndex === hoverIndex) {
                return;
            }
            const hoverBoundingRect = ref.current?.getBoundingClientRect();
            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
            const clientOffset = monitor.getClientOffset();
            const hoverClientY = clientOffset.y - hoverBoundingRect.top;

            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
                return;
            }

            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
                return;
            }
            moveNote(dragIndex, hoverIndex);
            item.index = hoverIndex;
        },
    });
    const [{ isDragging }, drag] = useDrag({
        type: 'note',
        item: () => {
            return { id, index };
        },
        collect: monitor => ({
            isDragging: monitor.isDragging(),
        }),
    });

    const opacity = isDragging ? 0 : 1;
    drag(drop(ref));
....

Логика страницы, где находятся перечень списков:

function NotePage() {   
    const moveNote = useCallback((dragIndex, hoverIndex) => {
        const dragNote = notes[dragIndex];
        setNotes(update(notes, {
            $splice: [
                [dragIndex, 1],
                [hoverIndex, 0, dragNote],
            ],
        }));
    }, [notes]);

Где мне нужно делать изменения(put) в самом компоненте или на странице где их перечень? И как передать эту позицию элемента?