Unable to drag list item after removing/unchecking particular items. Need help.

[abhijitv2]

Hello!

I am using react-dnd library to implement drag n drop effect.
I have a normal flow as shown, and user can reorder the flow by rearranging them and whichever step user does not want to include in the flow, he/she can exclude it by unchecking it.

Till here, everything works fine, but when I uncheck second and third step, and then if I drag the first step on the top to the bottom step then it does not allow/ does not drop the first step to the bottom of the active flow.

little but about my code: I have an array of objects where each object has a field 'checked' which is true initially to indicate all the steps are included in the flow. Once I uncheck a step from the flow, I update its checked value to false and move it to inactive step array. Hence, the initial array of object remains the same, I only separate it basis on the checked value.

I need help to resolve this issue as I am new to react-dnd.

Kindly visit link : https://stackblitz.com/edit/vitejs-vite-latb4r?file=src%2FApp.jsx