Форма HandleSubmit ReactJS

Я хотел бы узнать, как лучше создать функцию для получения данных из формы и отправки их на бэкэнд с помощью крючков.

чуть ниже следует фрагмент кода, где он представляет модальное окно с формой, получающей выбор, который использует данные из API JSONPlaceholder / users, поэтому он соединяется с двумя входами, которые я отправлю на бэкэнд

  return (
    <>
      <Header openModal = {toggleModal} />
      <Modal isOpen = {modalOpen} setIsOpen = {toggleModal}>
      
      <Form onSubmit = {handleCreateDivida}>

        <h1>Cadastro de dívidas</h1>
        <p style = {{paddingTop: "20px"}}>Cliente</p>

        <Select value = {idUsuario} onChange = {(e) => { setIdUsuario(e.target.value) }} className = "SelectInput" name = "idUsuario" defaultValue = "" >
        <option disabled = {true} value = "">Ex: José</option>
            {user.map((user) => (
                            <option value = {user.id} key = {user.id}>
                                {user.name}
                            </option>
                        ))}
        </Select>
       

        <p style = {{paddingTop: "20px"}}>Motivo</p>
        
        <Input value = {motivo} onChange = {(e) => { setMotivo(e.target.value) }} name = "motivo" placeholder = "Ex: Aluguel" />

        <p  style = {{paddingTop: "20px"}}>Valor</p>
        <Input  value = {valor} onChange = {(e) => { setValor(e.target.value) }} name = "valor" placeholder = "Ex: R$ 19.90"/>

        
        <button type = "submit" data-testid = "add-food-button">
          <p className = "text">Salvar</p>
          <div className = "icon">
            <FiCheckSquare size = {24} />
          </div>
        </button>
      </Form>
    </Modal>