keep table styling static while dragging table header element (beautiful-dnd)

Question

I'm very new to react draggable and beaitiful-dnd, I want to be able to drag my table headers around, which I managed! But the styling "pops out" while an item is selected like so:

the item that is being dragged it seems to change the size of the entire table until I place it down again. I'm not sure what property I should add/change for the table to stay put while the item itself is being moved around? Here's the code for the movable header:

// React-Beautiful-dnd code
const getItemStyle = (isDragging, draggableStyle) => ({
    userSelect: "none",
    paddingBottom: 8,

    // change background colour if dragging
    background: isDragging ? "grey" : "none",

    // styles we need to apply on draggables
    ...draggableStyle
});

class EnhancedTableHead extends React.Component {
    render() {
        const { columnData, handleReorderColumnData } = this.props;

        return (
            <DragDropContext onDragEnd={handleReorderColumnData}>
                <TableHead>
                    <TableRow
                        component={Droppable}
                        droppableId="droppable"
                        direction="horizontal"
                        sx={{ padding: 0 }}
                    >
                        {(provided, snapshot) => (
                            <tr
                                key={snapshot.toString()}
                                ref={provided.innerRef}
                                {...provided.droppableProps}
                            >
                                {columnData.map((item, index) => (
                                    <Draggable
                                        key={item.id}
                                        draggableId={item.id}
                                        index={index}
                                    >
                                        {(provided, snapshot) => (
                                            <TableCell
                                                ref={provided.innerRef}
                                                {...provided.draggableProps}
                                                {...provided.dragHandleProps}
                                                style={getItemStyle(snapshot.isDragging, {
                                                    ...provided.draggableProps.style,
                                                    width: '10%',
                                                    paddingTop: ".25rem"
                                                })}
                                                padding="checkbox"
                                                sx={{ borderStyle: "solid", borderWidth: '1px 2px 1px 0px', borderColor: 'rgba(0, 0, 0, 0.2)' }}
                                                key={item.id}
                                            >
                                                {item.label}
                                            </TableCell>
                                        )}
                                    </Draggable>
                                ))}
                                {provided.placeholder}
                            </tr>
                        )}
                    </TableRow>
                </TableHead>
            </DragDropContext>
        );
    }
}

this is based on a codesandbox I found with draggable headers. Did I accidentally remove an important styling?

New discovery:

turns out if I add display: 'inline-block' to getItemStyle it doesn't shift things around... but my table header becomes tiny instead of filling up the actual width of the table like this:

what do I need to set?