Reshifting columns after drag and drop using React-rnd

Question

I am just getting started with React. I am trying to use React-Rnd npm to perform a drag and drop as well as a resize. I have a grid of 2*2 and I will have 2-4 Rnd controls available for users based on their permissions. If there are all 4 controls then no issues. But if there are less, the users can opt to resize certain columns and in that case the Rnd column can shift to below row and fill it. Is there a way to achieve this? I understand that I need to use OnDrag&Drop method of Rnd control. But React and Js being not by strong suite, any help would be appreciated. A rough sample would be helpful