unable to get table item in deleted section - reactjs

Question

i have created a component in which i delete the table item its deleted i also want to add a button to add in the deleted item in the table done successfully but problem is that when I remove table item it item should be shown in the deleted component here is my code
class Movies extends Component {
state = {
movies,
deleted:[]
};
handleDelete = (_id) => {
const movie = this.state.movies.find(movie => movie._id === _id);
this.setState({ deleted: [...this.state.deleted, movie] });
this.setState({movies:this.state.movies.filter(movie => movie._id !== _id)})
};
handleReinstate = (_id) => {
const movie = this.state.deleted.find((movie) => movie._id === _id);
this.setState({ movies:[ ...this.state.movies,movie] });
this.setState({deleted:this.state.deleted.filter((movie) => movie._id !== _id)})
};
render() {
return (
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Stock</th>
<th>Rate</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.movies.map((movie) => {
return(
<tr key={movie._id}>
<td>{movie.title}</td>
<td>{movie.genre.name}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td
onClick={() => this.handleDelete(movie._id)}
className="btn btn-danger btn-outline-warning btn-sm active "
>
Remove
</td>
</tr>
)})}
</tbody>
<tbody>
<h1>deleted</h1>
{this.state.deleted.map(movie => (
<tr key={movie._id}>
<td
onClick={() => this.handleReinstate(movie._id)}
className="btn btn-danger btn-outline-primary btn-sm active "
>
ADD
</td>
</tr>
))}
</tbody>
</table>
);
}
}
I want to show like this but failed

Answer 1

adding this will solve problem
{this.state.deleted.map(movie => (
<tr key={movie._id}>
<td>{movie.title}</td>
<td>{movie.genre.name}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td
onClick={() => this.handleReinstate(movie._id)}
className="btn btn-danger btn-outline-primary btn-sm active "
>
ADD
</td>
</tr>
))}