Remove React component from DOM


I have an array that is populated with data obtained from an API call within a useEffect hook. Each one of the array objects are turned into a React component called Booking. Users have the possibility to delete bookings. Any here’s what I am doing, when they try to do so: I am making an API call to delete bookings and after that I try to change state so I delete the booking from the array. However, this change is probably only visible on the next loop of the state. I am still not really familiarised with React lifecycle and async calls but I just wanted to know what I can do to instantly delete the removed component from DOM without refreshing the page.