Установка состояния в красивом перетаскивании

Question

Я делаю приложение React с красивым компонентом перетаскивания. Я хочу установить переменную с состоянием, равную характеристике c ('id') в перетаскиваемом элементе, когда этот элемент перетаскивается в конкретный столбец.

Вот значения компонентов перетаскивания

    const characteristics = [
        { id: "cia", content: 'Geopolitical' },
        { id: "randomarm", content: 'Dog Loving' },

    ];

    const starterColumns = {
        "1": {
            name: 'test',
            items: characteristics
            },
        "2": {
            name: 'test2',
            items: []
        }
    }

Вот код перетаскивания.

import React from 'react';
import '../styles/Home.css';
import { useState, useEffect } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';


const onDragEnd = (result, columns, setColumns, getDirections) => {
    if (!result.destination) return;
    const { source, destination } = result;
    if (source.droppableId !== destination.droppableId) {
        const sourceColumn = columns[source.droppableId];
        const destColumn = columns[destination.droppableId];
        const sourceItems = [...sourceColumn.items];
        const destItems = [...destColumn.items];
        const [removed] = sourceItems.splice(source.index, 1);
        destItems.splice(destination.index, 0, removed);
        setColumns({
            ...columns,
            [source.droppableId]: {
                ...sourceColumn,
                items: sourceItems
            },
            [destination.droppableId]: {
                ...destColumn,
                items: destItems
            }})
    } else {
        const column = columns[source.droppableId];
        const copiedItems = [...column.items]
        const [removed] = copiedItems.splice(source.index, 1);
        copiedItems.splice(destination.index, 0, removed);
        setColumns({
            ...columns,
            [source.droppableId]: {
                ...column,
                items: copiedItems
            }
        })
    }
};


export default function DragNDrop (props) {


    return (
        <div style={{displey: 'flex', justifyContent:'center', height: '100%'}}>
            <DragDropContext onDragEnd={result => onDragEnd(result, props.columns, props.setColumns)}>
                {Object.entries(props.columns).map(([id, column]) => {
                    return (
                        <div stle={{display: 'flex', justifyContent: ' center', height: '100%'}}>                           <h2>{column.name}</h2>
                            <Droppable droppableId={id} key={id}>
                                {(provided, snapshot) => {
                                    return (
                                        <div
                                            {...provided.droppableProps}
                                            ref={provided.innerRef}
                                            // for changing what happens when something is being dragged
                                            style={{
                                                background: snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
                                                padding: 4,
                                                width: 250,
                                                minHeight: 500
                                            }}
                                        >
                                            {column.items.map((item, index) => {
                                                return (
                                                    <Draggable key={item.id} draggableId={item.id} index={index}>
                                                        {(provided, snapshot) => {
                                                            return (
                                                                <div ref={provided.innerRef}
                                                                {...provided.draggableProps}
                                                                {...provided.dragHandleProps}
                                                                style={{
                                                                    userSelect: 'none',
                                                                    padding: 16,
                                                                    margin: '0 0 8px 0',
                                                                    minHeight: '50px',
                                                                    backgroundColor: snapshot. isDragging ? ' #263B4A' : '#456C86',
                                                                    color: 'white',
                                                                    ...provided.draggableProps.style
                                                                }}
                                                                >
                                                                {item.content}
                                                                </div> 
                                                            )}}
                                                    </Draggable>
                                                )})}
                                            {provided.placeholder}    
                                        </div>
                                    )
                                }}
                            </Droppable>

                        </div>
                    )
                })}
            </DragDropContext>
        </div>
    )
}

Спасибо за помощь!