React Final Form How to pass form values in a modal button?

I migrated my forms from Redux-form to react-final-form, everything was going well apart from a special case. I have a form with values, and when you want to save it, a modal with two buttons opens, the one to submit the form and the other to send an OTP with form values.

I have followed the documentation How can I trigger a submit from outside my form? with the solution via closure.

But when I want to get form values to a function I get undefined. I take care all the questions here but nothing seems to fit to my problem.

Here a part of my example:

<Form
    subscription={{ submitting: true, pristine: true }}
    destroyOnUmount={false}
    enableReinitialize={false}
    forceUnregisterOnUnmount={false}
    keepDirtyOnReinitialize
    onSubmit={onSubmit}
    initialValues={initialValues}
    FormState
    render={({
      handleSubmit, values, submitting
    }) => {
      submit = handleSubmit;
      return (
        <form onSubmit={handleSubmit} className="edit-device-section">
          ...
          ...
          ...
          ...
          <Modal
            show={showModal}
            onHide={handleClose}
            backdrop="static"
            centered
            keyboard={false}
            className="device-modal"
          >
          ...
          ...
          ...
          ...


     

<Button
                          variant="primary"
                          className="btn-raised otp-btn"
                          onClick={() => sendSmsOtp(values, 'otp')}
                          disabled={submitting}
                        >
                          {f({ id: 'button.smsOtp' })}
                        </Button>
                      )}
                      <Button
                        variant="primary"
                        className="btn-raised execute-btn"
                        type="submit"
                        onClick={(event) => {
                          submit(event);
                        }}
                        disabled={submitting}
                      >
                        {f({ id: 'button.execute' })}
                      </Button>

Any ideas on what I should do?

After a lot research, finally I found the solution. To have access to your form values, it's required to pass form: {getState} inside render.

<Form
    subscription={{ submitting: true, pristine: true }}
    destroyOnUmount={false}
    enableReinitialize={false}
    forceUnregisterOnUnmount={false}
    keepDirtyOnReinitialize
    onSubmit={onSubmit}
    initialValues={initialValues}
    FormState
    render={({
      handleSubmit, values, submitting, form: { getState }
    }) => {

And pass getState().values to your function:

<Button
  onClick={() => functionName(getState().values)}
>