Передача информации из формы в функцию React js

Я новичок в реагировании и js, и я хочу создать форму редактирования, содержащую некоторую изменяемую информацию, которую позже можно будет опубликовать в API с помощью Axios. дело в том, что я не ввожу свою функцию, когда нажимаю кнопку отправки, и я не знаю, правильно ли передана информация моей формы в мою функцию редактирования.

function EditJob (jobid, event) {
  console.log('editjob fired 1')
  console.log(jobid)

  const updateJob = {
    title: event.target.jobtitle.value,
    company_name: event.target.companyname.value,
    internal_code: event.target.internalcode.value,
    department: event.target.department.value,
    location: event.target.jlocation.value,
    tags: event.target.tags.value,
    benefits: event.target.benefits.value,
    description: event.target.description.value,
    requirements: event.target.requirements.value
  }
  return axios({
    method: 'put',
    url: '/api/jobs/update-job/' + jobid,
    headers: headers,
    data: updateJob
  })
}

export default function Jobs () {
  const classes = useStyles()
  const [jobs, locations, departments, tags, deleteJob, editJob] = useJobs()
  const [show, setShow] = React.useState(false)

  const handleClose = () => setShow(false)
  const handleShow = () => setShow(true)

  return (
    <>
   {jobs.map(job => (
          <>
            <Modal show={show} onHide={handleClose}>
              <Modal.Header closeButton>
                <Modal.Title>Edit Job Position</Modal.Title>
              </Modal.Header>
              <Modal.Body>

                <div className='container'>

                <Form onSubmit = {async () => { await EditJob(job.id); editJob() }}>

                <Row>
                  <Col lg={6}>
                    <Form.Group controlId='jobtitle'>
                      <Form.Label style={{ color: 'green' }}>Job Title :</Form.Label>
                      <Form.Control type='textbox' defaultValue={job.title} name='jobtitle' required placeholder='Enter Job Title' />
                    </Form.Group>

                    <Form.Group controlId='internalCode'>
                      <Form.Label style={{ color: 'green' }}>Internal Code :</Form.Label>
                      <Form.Control type='textbox' defaultValue={job.internal_code} name='internalcode' required placeholder='Enter Internal Code' />
                    </Form.Group>

                    <Form.Group controlId='department'>
                    <Form.Label style={{ color: 'green' }}>Department :</Form.Label>
                    <Form.Control type='textbox' defaultValue={job.department} name='department' disabled required placeholder='Enter Department' />
                  </Form.Group>

                  </Col>
                <Col lg={6}>

                  <Form.Group controlId='jlocation'>
                    <Form.Label style={{ color: 'green' }}>Location :</Form.Label>
                    <Form.Control type='textbox' defaultValue={job.location} name='jlocation' disabled required placeholder='Enter Location' />
                  </Form.Group>

                </Col>
              <Col lg={12}>
              <Form.Group>
                <Button style={{ position: 'relative', left: '295px' }} variant='success' type='submit'>Edit Job Position</Button>
              </Form.Group>
              </Col>
            </Row>
              </Form>
                </div>
              </Modal.Body>
        </Modal>

updateJob const должен содержать информацию, отправленную из формы с использованием event.target, но я думаю, что делаю что-то не так, потому что я даже не вхожу в функцию, а моя страница просто обновляется, когда я нажимаю кнопку отправки. какое правильное решение для этого?