Scroll position reset across all items, with useSortable, when dropping item

[getnashty]

I have a horizontal list of scrollable children, but when I drop any of the items, the scroll position resets on all of them. Any ideas for how I can resolve this?

this is the item code:

    const SortableTest = React.memo(({ id, width }: { id: string; width: string }) => {
        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });

        return (
            <div
                {...attributes}
                {...listeners}
                ref={setNodeRef}
                className="overflow-auto height-full"
                style={{
                    width,
                    transform: CSS.Translate.toString(transform),
                    transition,
                }}
            >
                {LIPSUM}
            </div>
        );
    });

    SortableTest.displayName = 'SortableTest';

and the container:

                        <DndContext
                            onDragEnd={onDragEnd}
                            modifiers={[restrictToHorizontalAxis, restrictToFirstScrollableAncestor]}
                        >
                            <div
                                className={classNames('flex flex-1 overflow-x-auto')}
                            >
                                <SortableContext items={items} strategy={horizontalListSortingStrategy}>
                                    {items.map((id) => {
                                        return <SortableTest key={id} id={id} width={'368px'} />;
                                    })}
                                </SortableContext>
                            </div>
                        </DndContext>

[ehrro]

useLayoutEffect custom hook for each sortable that stores the scroll position. Simple.