Rearrange column in the rows after deleting some column using reactstrap

Question

{allDashItems?.map((item) => ( <Col {...item.size} key={item.name} className={item.class}> {item.component}{item.location} </Col> ))}

im rendering list of data in Cols but after deleting some Col , its not rearranging and giving this gap between col.

any suggestion how can i solve it

enter image description here Thank you in advance

I have tried to sort them OR refreshed the page but did not works