Связать раздельные блоки html css

Есть модель

<DragDropContext onDragEnd={onDragEnd}>
                    <Droppable droppableId="droppable" direction="horizontal">
                        {provided => (
                            <thead {...provided.droppableProps} ref={provided.innerRef}>
                                <UI.DefaultTR>
                                    {state.map((item: any, index: number) => (
                                        <Draggable draggableId={`item-${item.id}`} index={index} key={item.id}>
                                            {provided => (
                                                <UI.DefaultTH
                                                    ref={provided.innerRef}
                                                    {...provided.draggableProps}
                                                    {...provided.dragHandleProps}
                                                >{Object.keys(item)[0]}</UI.DefaultTH>
                                            )}
                                        </Draggable>
                                    ))}
                                </UI.DefaultTR>
                            </thead>
                        )}
                        </Droppable>
                </DragDropContext>
                        <UI.TableBody>
                            {data && data.map((stock: any, index: number) => {
                                return (
                                    <UI.DefaultTR key={index} style={{position: "sticky"}}>
                                        {state.map((item: any, index: any) => {
                                            return (
                                                <UI.DefaultTD fontWeight="500" key={index}>{stock[Object.keys(item)[0]]}</UI.DefaultTD>
                                            )
                                        })}
                                    </UI.DefaultTR>
                                )
                            })}
                        </UI.TableBody>
            </UI.DefaultTable>

Используя библиотеку Drag n Drop я могу менять столбцы местами. Всё работает, и при смене столбца в thead, данные в body так же подтягиваются нужны, но в самом переносе показывается что переносится только данные из thead. Как можно связать UI.DefaultTH и UI.DefaultTR между собой, чтобы была имитация что всё вместе переносится