Drag and drop reactJs using beautiful dnd

Question

I am trying to practice #Drag and Drop FreeCodeCamp So I created a state which includes a number of boxes and inside these boxes, there should be an icon that I suppose to be able to move to any of the generated boxes so the problem with my code is that when picking the icon it renders all the boxes instead of one box

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>
);