React DnD how I cannot allow the draggable cannot overlap - reactjs

Question

Hi Guys I need a guide on this.
I am creating a React DnD. I am creating a Container and I am creating Boxes inside .
How I cannot Drag one over other.
What has more sense, is ask for the position in the callBack and don't allow the drop of the coordinates or modified the ref and "remove the dropable area"?
Anybody with experience in ReactDnD could give me a guide.
import update from 'immutability-helper'
import { useCallback, useState } from 'react'
import { useDrop } from 'react-dnd'
import { Box } from './Box.js'
import { ItemTypes } from './ItemTypes.js'
// This is the size of the area of Drop
const styles = {
width: 500,
height: 500,
border: '1px solid black',
position: 'relative',
}
export const Container = () => {
const [boxes, setBoxes] = useState({
'01': { top: 0, left: 0, title: 'Ship01',width:2,height:1 },
'02': { top: 100, left: 0, title: 'Ship02',width:3,height:1 },
'03': { top: 200, left: 0, title: 'Ship03',width:4,height:1 },
'04': { top: 300, left: 0, title: 'Ship04',width:5,height:1 },
'05': { top: 400, left: 0, title: 'Ship05',width:6,height:1 },
})
const moveBox = useCallback(
(id, left, top) => {
setBoxes(
update(boxes, {
[id]: {
$merge: { left, top },
},
}),
)
},
[boxes, setBoxes],
)
const [, drop] = useDrop(() => ({accept: ItemTypes.BOX, drop(item, monitor) {
const delta = monitor.getDifferenceFromInitialOffset()
const left = Math.round(item.left + delta.x)
const top = Math.round(item.top + delta.y)
moveBox(item.id, left, top)
return undefined}}),[moveBox],)
return (
<div ref={drop} style={styles}>
{Object.keys(boxes).map((key) => {
const { left, top, title,width, height} = boxes[key]
return (
<Box key={key} id={key} left={left} top={top} width={width} height={height} boxes={boxes}> {title} </Box>
)
})}
</div>
)
}