I am using props from a parent component in a modal and I am unsure of how to make it show in a select dropdown dynamically. I see that the stubbed hardcoded 'Agent' value is being repeated but how do I actually make that dynamically show the values from the props I am receiving? What am I missing here?

React Modal Component

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>
  )
}