React-dnd с несколькими canDrops, разделенными через массив

Я работаю над созданием перетаскивания из одного контейнера div в другой. Он работает в нормальных условиях с приведенным ниже кодом, если я не разделяю область перетаскивания на отдельные блоки div. Однако это то, что мне нужно сделать, поэтому я скрываю div, которые являются шагами, а затем использую следующую предыдущую кнопку для их переключения, однако я не могу создать 4 отдельных dropzone, потому что это число может изменяться динамически.

Итак, мой вопрос в том, как я могу разделить секцию для сброса банок, чтобы сделать ее динамической на основе содержащегося в ней массива. Я в основном имею в виду область box.map, поскольку именно она генерирует результат при перетаскивании любых элементов, потому что у меня он содержится в другом массиве, но мне нужно, чтобы в этом сценарии было несколько CanDrops, их было бы 4, потому что stepBlock является равно 4, но я не уверен, как связать это с родительским массивом. Вот мой код:

 import { useDrag, useDrop, useDragLayer } from 'react-dnd'               
                
  let stepBlock = 4;

const ELEMENT = 'element';

const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
    type: ELEMENT,
    collect: (monitor) => ({
    isDragging: monitor.isDragging()
    })
}))

const [{ canDrop, isOverCurrent }, drop] = useDrop({
    accept: 'element',
    canDrop: () => true,
    drop: item => {
    if (isOverCurrent) {
    setBoxes([...boxes, item]);
    }
    },
    collect: monitor => ({
    canDrop: monitor.canDrop(),
    isOverCurrent: monitor.isOver({ shallow: true })
    )
})

 <div className = {'StepContainer'}>

  <div className = {'stepControls'}>
      <div ref = {dragPreview} style = {{ opacity: isDragging ? 0.5 : 1}}>
           <div className='element' ref = {drag}>
      </div>          
   </div>
 </div>

{[...Array(stepBlock)].map((e, i) =>
<div key = {i} className = {`stepBlock ${i !== index ? "hidden" : ""}`}>
    {boxes.map(member => (
        <div className = "box">
        {member.name}
        </div>
    ))}
    <div className = {`drop-area ${canDrop ? 'highlight': ''}`} ref = {drop}>
    {canDrop ? 'Release to drop' : 'Drag a box here'}
    </div>
</div>
)}

</div>

<div className = {'toggleBTNContainer'}>

<button
 disabled = {index === 0}
 onClick = {() => setIndex((prevIndex) => prevIndex - 1)}
 className = {'previousBTN'}>previous</button>
 <button
   disabled = {index === stepBlock - 1}
    onClick = {() => setIndex((prevIndex) => prevIndex + 1)}
     className = {'nextBTN'}>next</button>
</div>
</div>