data structure for drag and drop feature with react-query

gistfile1.txt

// API
{
    items: []
}

// Query
{
    items: {
        [id]: {
            id: 1,
            name: 'Item 1',
            description: 'Item 1 description',
            price: 100,
            image: 'http://example.com/image.jpg'
        },
    }
}

// Render
const categories = [
    5, 3, 1, 2, 4
]

const items = [
    6a, 2b, 3d, 4e, 1c
]

const item = data.items[id]

categories.map(cid => {
    const category = data.items[cid]

    return (
        <>
        <DragAndDropContainer>
            <DragHandler />
            {items.map(iid => {
                const item = data.items[iid]

                return (
                    <DragAndDropContainer>
                        
                    </DragAndDropContainer>
                )
            })}
        </DragAndDropContainer>
        </>
    )
})

// Is it a bad idea to ever call invalidateQueries in a drag and drop software?
// Never mind