send delete request to api using fetch and useEffect hook in react - node.js

Question

I'm trying to send a delete request to API using fetch and useEffect hook in react. I want to execute the delete request with the click of a button and pass the id of the specific JSON data that has to be deleted. I'm unable to figure out how how to pass this id to fetch function under the useEffect hook.
const Display = () => {
const [state, setState] = useState([])
let deleteJSON;
const handleDelete = (_id) => {
deleteJSON = async (id) => {
const res = await fetch(`http://localhost:8080/users/${id}`, {method: 'DELETE', mode: 'cors'})
console.log(res.status)
}
}
useEffect(() => {
(async () => {
const res = await fetch('http://localhost:8080/users', {method: 'GET', mode: 'cors'})
const jsonArr = await res.json()
setState((prevState) => {
return [...prevState, ...jsonArr]
})
})();
}, [])
return (
<div className='display'>
{
state.map((json) => {
const {name, email, phone, _id} = json
return (
<div key = {_id} >
<div>
<button onClick={(event) => { handleDelete(_id)} } className="box" >Delete</button>
<button className="box">Update</button>
</div>
<h2>{_id}</h2>
<h2>{name}</h2>
<h2>{email}</h2>
<h2>{phone}</h2>
</div>
)
})
}
</div>
)
}
As you can see I've passed the id to the handleDelete function but I can only call the deleteJSON function inside the useEffect hook. But inside the useEffect hook, I can't get access to this function.