Bug where only header cell content is dragged using react-resizable, react-drag-listview and AntDesign table

I have an Ant Design table where columns are resizable using react-resizable and drag-able using react-drag-listview.

All of the features are working nicely although there is a bug that exhibits itself under certain circumstances which means that the entire solution to having those features working together might not be viable or ready for production.

Here is the correct behaviour - when clicking on a table header cell the entire cell is dragged and you can see the box-shadow around its borders like this:

The bug is that sometimes after resizing a column and then clicking the header cell of the column to the right, the header cell is not dragged, only the the content (text in this case) / column title is, which looks like this:

Here is a code sandbox and a step by step guide on how to recreate the bug:

1. Go to the code sandbox
2. Click on the right hand border of any column
3. Drag and resize that column to the right / bigger until the mouse is over the title of the column to the right of it like this:

4. As soon as you have done this lift the mouse button up and press it down on the title of the column you are hovering over i.e. (click on the title of that column to the right)
5. Drag the column

Sometime the behaviour is intermittent but it is easily reproducible and may be more visible if the steps are repeated quickly.

How can this bug be solved?

from Bug where only header cell content is dragged using react-resizable, react-drag-listview and AntDesign table