I am experimenting with react. I am mostly backend so frontend gives me some obvious troubles. I tried some google solutions but not getting any success. Here is the problem. I have following form.

This form allows you to Create or Edit Service. There is same callback method for Saving the changes.

 export const createOrUpdateService = (data, _, props) => {
  console.log('Create or Update invoked.');
  if (data.id) {
    props.dispatch(actions.updateService(data.id, data));
  }
  else {
    props.dispatch(actions.createService(data));
  }
}

For some reason when I edit and save, operation works successfully. But when I create and save this method never gets called. These are my redux buttons calling createOrUpdateService method.

             <button className='btn btn-form my-button--orange' type='button'
                 style={{margin: "5px"}}
                 disabled={editable} onClick={() => enableEdit() }>
                 New Service
              </button>
              <button className='btn btn-form my-button--orange' type='button'
                 style={{margin: "5px"}}
                 disabled={!valid || submitting} onClick={() => enableEdit() } >
                 Edit Service
              </button>
              <button className='btn btn-form my-button--orange' type='submit'
                 style={{margin: "5px"}}
                 disabled={!editable} onClick={() => handleEdit(handleSubmit(createOrUpdateService)) } >
                 Save
              </button>

This is handleEdit method -

const handleEdit = (editCallBack) => {
    if (editable) {
      editCallBack()
    }
    toggleEditable();
  }

I am wondering if editCallback() can involve createOrUpdateService() for "Edit Service" then why not for "New Service"? I am wondering how can I invoke multiple submits from same form.