UI issues during drag

Expected behavior

I expect dragging to be as smooth as ordinary.

Actual behavior

However, when I start dragging anything located with a Callout, Panel or a Dialog (these all are components from Fluent UI) there is a strange offset that actually becomes bigger when the element is located more to the right of the screen.

Steps to reproduce

I have prepared two GIFs visualizing the problem.

Also, I have created a repository whit the minimum required for a valuable code sample representing the problem: https://github.com/TonyTroeff/issue-with-react-beautiful-dnd

What version of React are you using?

The code sample provided uses React v17.0.1, but I can ensure you that it behaves the same way in old versions too. The main project where this was found as an issue runs on v16.13.1

What version of react-beautiful-dnd are you running?

Both projects use latest version - 13.0.0

What browser are you using?

I tested this in all browsers that I could - Edge, Chrome, Firefox and Brave.