react-beautiful-dnd: overflow breaking Droppable

Question

I am using react-beautiful-dnd to create draggable divs inside a container.

It works really well as you can see in the GIF below, however because it is inside a scrollable container (.draggableContainer), after scrolling down, the drag starts from an incorrect position.

Let me know if anyone would like me to attach some of the CSS.

This issue is caused by overflow-y: auto for draggableContainer.

// .draggableContainer has overflow-y: auto
<div className={`${styles.draggableContainer}`}>
    <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="menuItems">
            {(provided) => (
                <div {...provided.droppableProps} ref={provided.innerRef} className={styles.menu_container}>
                    {menuItemArr.map((MI, index) => (
                        <Draggable key={MI.id} draggableId={MI.id.toString()} index={MI.id} id={MI.id}>
                            {(provided) => (
                                <div ref={provided.innerRef} {...provided.draggableProps} className={`${styles.popup_form_custom} ${styles.draggable}`}>

                                    <div className={styles.popup_formbox}>
                                        <label className={styles.smaller_font}>Percentage</label>
                                        <input type="text" placeholder="%" value={MI.percentage} onChange={(selected) => handleMenuArr("percentage", selected.target.value, MI.id)}/>
                                    </div>

                                </div>
                            )}
                        </Draggable>
                    ))}
                    {provided.placeholder}
                </div>
            )}
        </Droppable>
    </DragDropContext>
</div>

Here is an example: