Estoy usando accesorios de un componente principal en un modal y no estoy seguro de cómo hacer que se muestre dinámicamente en un menú desplegable de selección. Veo que el valor del 'Agente' codificado de forma rígida se repite, pero ¿cómo hago para que muestre dinámicamente los valores de los accesorios que estoy recibiendo? ¿Que me estoy perdiendo aqui?

Reaccionar componente modal

 import React, { useState, useEffect } from 'react' import Button from '@/components/Button.jsx' import Loading from '@/components/Loading.jsx' import Modal from '@/components/Modal.jsx' /** * Handles displaying the capabilities modal for creating new capabilities or updating exiting ones. * @component */ export default function AddCapabilitiesModal({ profile, onClose }) { const [error, setError] = useState(null) const [loading, setLoading] = useState(false) const [agents, setAgents] = useState([]) const [profiles, setProfiles] = useState([]) useEffect(() => { if (profile) { console.log(profile); setAgents(profile.map((f) => ({ label: f.agent, value: f.agent }))) setLoading(false); } }, []) /** * Erases information of text field variables and closes modal. */ const closeModal = () => { setError(false) setLoading(false) onClose() } const dummyClick = () => { console.log('click') } return ( <div> <Modal> {error && ( <label className='high'> Error: Please confirm inputs and try again. </label> )} <div className='modal-title'> <label>EDIT STATUS</label> </div> <br /> <Loading text='Saving Test...' visible={loading} /> {!loading && ( <div id='addCapSelectInput' className='sub-filters'> <div className='lrow filter-options group light-grey-bg'> <select> {agents.map((agent) => ( <option key={agent} value={agent}> Agent </option> ))} </select> </div> </div> )} <div className='modal-row top-horizontal-divider'> <Button onClick={closeModal} className='modal-cancel'> Cancel </Button> <Button onClick={dummyClick} className='modal-submit' > Submit </Button> </div> </Modal> </div> ) }