Estoy tratando de practicar #Arrastrar y Soltar FreeCodeCamp Así que creé un estado que incluye varios cuadros y dentro de estos cuadros, debería haber un icono que supongo que se puede mover a cualquiera de los cuadros generados, por lo que el problema con mi el código es que al elegir el ícono, muestra todas las cajas en lugar de una caja

 const [pointPlace, setPointPlace] = useState([...Array(162).keys()]); const handleOnDragEnd = result => { const items = Array.from(pointPlace); const [reorderboxes] = items.splice(result.source.index, 1); items.splice(result.destination.index, 0, reorderboxes); setPointPlace(items); }; return ( <Box> <DragDropContext onDragEnd={handleOnDragEnd}> <Droppable droppableId="pointsContainer"> {provided => ( <Box className={classes.container} display={'flex'} flexGrow={1} flexWrap={'wrap'} alignItems={'center'} justifyContent={'center'} ref={provided.innerRef} {...provided.droppableProps} > {pointPlace.map((index, id) => ( <Draggable draggableId="draggable-point" index={index} key={id}> {provided => ( <Box className={classes.box} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}> {point} <p className={classes.boxNumber}>{index}</p> </Box> )} </Draggable> ))} </Box> )} </Droppable> </DragDropContext> </Box> );