Tengo problemas para pasar dos valores en mi componente de selección y trabajar en React. Actualmente estoy pasando el valor de id correcto en las opciones seleccionadas... sin embargo, cuando paso al cuerpo en newCapabilities, recibe el valor de id (agent.agentId) en lugar del valor de nombre previsto (agent.agent). Necesito poder enviar tanto el valor de identificación como el valor de nombre que estoy asignando en el agente.

¿Qué estoy haciendo mal aquí?

reaccionar-componente.js

 const handleChangeForm = (e) => { const { id, value } = e.target setForm({ ...form, [id]: value }) } const addCapabilities = async (tableName, body) => { const newCapabilities = { agent } response(newCapabilities) } <form> <label>Agent</label> <select className='add-cap-select' id='agent' onChange={handleChangeForm}> <option value=''>Agent</option> {agents.map((agent, index) => ( <option key={index} value={agent.agentId}> {agent.agent} </option> ))} </select> </form>