how to delete row from database immediately in react js? - node.js

Question

I am able to do axios.delete to remove an item from my database. But won’t be updated immediately unless I refresh the page or go to another page. here is the full component
function GestImages() {
//load Data from db
load data is working fine :
const [images, setImages]=useState([])
useEffect(()=>{
Axios.get("http://localhost:4000/produit/images")
.then(res=>{
setImages(res.data)
})
.catch(err=>{
console.log(err.message)
})
},[])
// delete Data from db
const deleteImage=(id,e)=>{
Axios.delete(`http://localhost:4000/produit/images/${id}`)
.then((res)=>{
setImages(prevImages => prevImages.filter(image => image.id !== id))
})
.catch(err=>{
console.log(err.message)
})
}
return (
<div className="container">
<div className="row row-a">
<div className="col-lg-12 col-md-12 d-flex justify-content-between" style={{backgroundColor:'#000000'}}>
<h1 className="justify-content-start" style={{color:'#FFFFFF'}}>Ajouter des images</h1>
<Link to='/gest-images/add-images' style={{marginTop:"1%"}} ><button className="btn btn-primary justify-content-end">Ajouter</button></Link>
</div>
<div className="col-lg-12 col-md-12 ">
<table className="table table-hover">
<thead>
<tr>
<th scope="col">Produit Name</th>
<th scope="col">Image</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{
images.map(images=>(
<tr key={images.id}>
<th>{images.produits.produitName}</th>
<td style={{width:"30%"}}><img src={"../../images/"+images.pathImage} style={{width:"20%"}} alt="produit img"/></td>
<td><button className="btn btn-danger" onClick={(e)=>deleteImage(images.id)}>Supprimer <FontAwesomeIcon icon={faTrashAlt} style={{color:"#FFFFFF"}}/> </button> </td>
</tr>
))
}
</tbody>
</table>
</div>
</div>
</div>
)
}
export default GestImages