[EuiDataGrid] Issue with reordering columns via drag and drop

[agon-qorolli]

Describe the bug
Reordering columns via drag and drop doesn't work correctly, when initial visibleColumns have different order than columns: EuiDataGridColumn[].
A valid use case of different order of visibleColumns, might be persisted orders.

Impact and severity
Is there an end-user impact caused by this bug? Not sure.
Is there a known workaround? Reorder columns: EuiDataGridColumn[] also, might not be optimal.

Environment and versions

• EUI version: 98.1.0
• React version: 18.2.0
• Kibana version (if applicable): N/A
• Browser: Chrome
• Operating System: macOS

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/p/sandbox/gallant-visvesvaraya-v2lfhw?file=%2Fdemo.js%3A50%2C1-58%2C5
2. Notice different order of initial visibleColumns, vs. columns.map(({id}) => id))
3. Reorder any column via drag and drop
4. See error. Other columns get reordered also.

Expected behavior
When initial visibleColumns have different order than columns, reordering a column via drag and drop should change the order of only the dragged column.

Minimum reproducible sandbox
https://codesandbox.io/p/sandbox/gallant-visvesvaraya-v2lfhw?file=%2Fdemo.js%3A50%2C1-58%2C5

Screenshots

[agon-qorolli]

The described issue happens also when programmatically changing visibleColumns, then trying to reorder the columns via drag and drop.

[mgadewoll]

@agon-qorolli Thanks for raising this!

This can be reproduced and seems to not be specific to mouse drag and drop of columns but also happens for any reordering of columns sharing the same logic (e.g. via the columns reordering popover)

We'll need to check on the overall functionality if a) usages need to be aligned or b) the functionality needs to be aligned.