React-Dropzone, useState & dnd-kit struggles

What I want to achieve is the ability to drag image previews to change the order of the images, ie. something like this: https://codesandbox.io/s/dndkit-sortable-image-grid-py6ve?file=/src/App.jsx

The images & their preview come from a react-dropzone component. There is a solid chance this is irrelevant to my issue but mentioning it to be sure.

My initial plan was to have a state in the react-dropzone component inside of the

onDrop:

onDrop:

that will populate the useState into the following shape:

{ id: number, src: File }

{ id: number, src: File }

. This approach is similar to the example in the first codesandbox. but I don't see how I can do this without a useEffect, which feels overkill since this is really close to what I want to achieve: https://github.dev/HamedBahram/dropzone

here is a sandbox to better illustrate the situation: https://codesandbox.io/s/mystifying-germain-cs1hsl?file=/src/App.tsx
Look at the block comment inside