React Final Form: How to render data with button outside form

Question

I have a form component(<InvoiceForm.tsx />) and I would like to render its data and push to database with a button component(<Button.js />) which will be called in another component( <InvoiceList.tsx />) - parent component of InvoiceForm. How do I do this? I have tried to follow the official documentation but no avail. Please help.

To make it clearer, the button component is in Invoicelist component

const initialValues = {
  name: '',
  description: ''
}

const InvoiceForm = ({
  handleSubmit,
  invoice,
}: {
  handleSubmit: () => void
  invoice: Cart
}) => {
  const form = useLazyRef(() => createForm({
    
    initialValues: {
      invoices: invoice != null
        ? invoice.items.map((item) => ({
          name: item.name,
          description: item.description
        })) : [initialValues]
    },
    keepDirtyOnReinitialize: false,
    mutators: { ...arrayMutators },
    onSubmit: handleSubmit
  }))

  return (
    
    <div className="c-invoices-content">
      <div className="c-invoices-panel">
        <div className="c-invoices-panel__body">
          <Form
            onSubmit={handleSubmit}
            form={form}
            render={({ handleSubmit, form, values}) => {
              
              return (
                <form
                  id="invoice-form"
                  autoComplete="off"
                  onSubmit={handleSubmit}
                  className="form"
                >
                  <FieldArray name="invoices">
                    {({ fields }) => fields.map((name, index) => {
                      const isFirst = index === 0

                      return (
                        <div className="form-field-row" key={name}>
                          <Field
                            className="textfield"
                            name={`${name}.name`}
                            component={TextInput}
                            placeholder="Name"
                            formInline
                            formLabel={isFirst ? 'Item Name' : ''}
                            validate={(values) => values ? undefined : 'Name can\'t be blank'}
                          />

                          <Field
                            className="textfield"
                            name={`${name}.description`}
                            component={TextInput}
                            placeholder="Description"
                            formInline
                            formLabel={isFirst ? 'Description' : ''}
                            validate={(values) => values ? undefined : 'Description can\'t be blank'}
                          />

                          <Button
                            className="form-field__action"
                            onClick={() => fields.remove(index)}
                          >
                            <Trash color="#555" size={24} />
                          </Button>
                        </div>
                      )
                    })}
                  </FieldArray>

                  <div className="form-field-row">
                    <Button
                      type="secondary"
                      onClick={() => form.mutators.push('invoices', initialValues)}
                      className="--border-dashed"
                    >
                      + Add Item
                    </Button>
                    
                  </div>
                  
                </form>
              )
            }}
          />
        </div>
      </div>
    </div>
  )
}

export default InvoiceForm

This is where i played around on how to pull the form content but still none.

        <Button
          onClick={() => {}}
        >
          Create
        </Button>

I'm getting "cannot find name 'handleSubmit'" by following the documentation.

Hope you can give me an input on this. Thank you.