I’m having an issue with the react-beautiful-dnd library, which is great for creating drag and drop functionality in React applications.

When I drag a Draggable object over a Droppable area and then drag it out to the right without releasing it, the Droppable area takes a noticeable delay before returning to its original position. However, when I drag the Draggable object out to the left, the Droppable area resets immediately.

Here is a video demonstrating the issue:
https://imgur.com/a/Jh59AC0

And you can find the example code here:
https://playcode.io/1902378

I would like the Droppable area to reset immediately when dragging the Draggable object out to the right, just like it does when dragging out to the left.

Has anyone encountered this issue before? Any advice on how to resolve it would be greatly appreciated.

Here is the relevant part of the code:

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function App() {
  return (
    <div>
      <header style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
        <DragDropContext>

          <Droppable key="1" droppableId="1" direction='horizontal'>
            {(provided) => (
              <div
                style={{
                  padding: ".5em",
                  height: "1em",
                  backgroundColor: "LightSteelBlue"
                }}
                ref={provided.innerRef}
                {...provided.droppableProps}
              >
                {provided.placeholder}
              </div>
            )}
          </Droppable>

          <Droppable droppableId='snippetSelection' direction='horizontal' isDropDisabled>
            {(droppableProvided) => (
              <div
                ref={droppableProvided.innerRef}
                {...droppableProvided.droppableProps}
              >

                <Draggable key="0" draggableId="0" index={0}>
                  {(provided) => (
                    <>
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={{
                          backgroundColor: "yellow",
                          ...provided.draggableProps.style,
                        }}
                      >
                        Drag Me
                      </div>

                    </>
                  )}
                </Draggable>

                {droppableProvided.placeholder}
              </div>
            )}
          </Droppable>

        </DragDropContext>
      </header>
    </div >
  );
}

export default App;