Passing Multiple Values in Select Option in React-CodePudding

I am having issues passing in two values in my select component and working in React. I am currently passing in the correct id value in the selected options.. however when I am passing to the body in newCapabilities, it is receiving a the id value (agent.agentId) instead of the intended name value (agent.agent). I need to be able to send both of the id value and name value that I am mapping through in agent.

What am I doing wrong here?

react-component.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>

CodePudding user response：

You can find the selected agent and get the name value

const newCapabilities = {
    agent: agents.find(a => a.agentId == form.agent)?.agent
}