React axios DELETE and POST adding to database but not updating state - reactjs

Question

When I delete an item, it is deleted from the database, but state is not updated until I refresh the page.
My understanding is that I don't want to update state directly, I want to make a copy of state, modify it, then overwrite the existing state, which should trigger a new render as it also removes the item from the database.
So I would think a spread operator would be ideal for this, but I can't seem to get it to re-render.
class Projects extends Component {
state = {
projects: []
};
getProjects() {
axios
.get('http://localhost:5309/api/projects')
.then(response => {
this.setState({ projects: response.data });
})
.catch(error => console.log(error));
}
deleteProject(event) {
axios
.delete(`http://localhost:5309/api/projects/${event.target.value}`)
.then(response => {
this.setState({ projects: response.data });
})
.catch(error => {
console.log(error);
});
}
componentDidMount() {
this.getProjects();
}
render() {
return (
<div className="Projects">
<h1>Projects</h1>
<div className="projectContainer">
{this.state.projects.map(project => {
return (
<div className="projects" key={project.id}>
<Card>
<CardBody>
<CardTitle>Name: {project.name}</CardTitle>
<CardText>
Project Description: {project.description}
</CardText>
</CardBody>
<Button color="secondary">Edit</Button>
<Button
color="danger"
type="submit"
value={project.id}
onClick={this.deleteProject}
>
Delete
</Button>
</Card>
</div>
);
})}
</div>
</div>
);
}
}
export default Projects;