Modal is getting the last value from my table - sql

Question

I created a modal with bootstrap, in react, but when it opens, it takes the last value from my table(sql). Does anyone know why he does this, and how I fix it
this is my code with the table and modal
When I open my MODAL the information there is wrong, it is taking the last item in my table.
this classific is each field of my table
return (
<React.Fragment key={classific.ID}>
<tbody className="bg-white divide-y divide-gray-200">
<tr>
<td className="px-2 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">
{classific.ID}
</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="font-bold text-sm text-gray-900">
{classific.DS_Classificacao}
</div>
</td>
<td className="px-9 py-4 whitespace-nowrap">
<div
className={
classific.Status === true
? 'inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800'
: 'inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-red-100 text-red-800'
}
>
{classific.Status === true ? 'Ativo' : 'Inativo'}
</div>
</td>
<td className="content_td">
<button
onClick={e => EditForm(classific.ID, e)}
className="text-gray-400 hover:text-gray-100 mx-2"
>
<span className="sr-only">Close panel</span>
<PencilIcon
className="h-6 w-6"
aria-hidden="true"
onClick={handleShowE}
/>
</button>
<button className="text-gray-400 hover:text-gray-100 ml-2">
<span className="sr-only">Close panel</span>
<TrashIcon
className="h-6 w-6"
aria-hidden="true"
**Here is where I press for my modal to open**
onClick={handleShowD}
/>
</button>
</td>
</tr>
</tbody>
**The information inside the modal is wrong**
<Modal
show={showD}
onHide={handleCloseD}
backdrop="static"
keyboard={false}
>
<Modal.Header>
<Modal.Title>
Deletar <b>{classific.DS_Classificacao}</b>
</Modal.Title>
</Modal.Header>
<Modal.Body>
Tem certeza que deseja deletar
<b> {classific.DS_Classificacao}</b> ? Essa ação é
irreversivel.
</Modal.Body>
<Modal.Footer>
<button
type="button"
className="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
onClick={handleCloseD}
>
Cancelar
</button>
<button
type="button"
className="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-red-700 bg-red hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
onClick={e => deleteForm(classific.ID, e)}
>
Deletar
</button>
</Modal.Footer>
</Modal>
<Modal
show={showE}
onHide={handleCloseE}
backdrop="static"
keyboard={false}
>
<Modal.Header>
<Modal.Title>Editar Classificação</Modal.Title>
</Modal.Header>
<Modal.Body>
{/* <ModalEdit id={classific.ID}></ModalEdit> */}
</Modal.Body>
<Modal.Footer>
<button
type="button"
className="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
onClick={handleCloseE}
>
Cancelar
</button>
</Modal.Footer>
</Modal>
</React.Fragment>
)
})}```