How to get the key from a list obj in html-javascript

I have an array of obj for employees and when the user tries to delete on of them there is a message popping up asking them if they want to continue with the proccess. If they press yes the employee is deleted. The problem is that in the list tag where the key={index} exists i call the function for the pop-up message, and then my other function for the delete proccess doesnt have access in that variable in order to delete the specific employee.

The code i use is the following:

//for the delete proccess
function handleRemoveYpallilos(index){
setYpalliloi(Y => Y.filter((_,i)=> i!==Y.index));
}


//list-items displayed 
<div className='ShowCase'>
<h2>Οι Υπάλληλοι σας:</h2>
<ol>
{Ypalliloi.map((Ypallilos,index)=>
<li className='list-item' key={index}>
<span className='OnomaEpitheto'>{Ypallilos.Yname} {Ypallilos.Yepitheto}</span>
<button className='delete-button' onClick={HandleAddDeleteSure}>Διαγραφή</button>
</li>  
)}
</ol> 
</div>
//the pop-up message 
//handleRemoveDeleteSure --> closes the message 
<div className='Delete-SureMSG'>
<span className="icon-close" onClick={HandleRemoveDeleteSure}><IoClose/></span>
<p className='DeleteSureText'>Είστε σίγουρος ότι θέλετε να διαγράψετε αυτόν τον υπάλληλο?</p>
<div className="button-container">
<button className='btnNo' onClick={HandleRemoveDeleteSure}>Όχι</button>
<button className='btnYes' onClick={handleRemoveYpallilos}>Ναι</button>
</div>
</div>