Trigger uppy upload on HTML form submission

I am trying to get Uppy to start its upload when I submit my form. I am using React and Flask as my server backend. Also using Formik for my forms.

JS

    .use(Form, {
            target: document.querySelector("form"),
            resultName: "uppyResult",
            getMetaFromForm: true,
            addResultToForm: true,
            multipleResults: true,
            submitOnSuccess: true,
            triggerUploadOnSubmit: true
      })

HTML

 <Form id="recipeForm" className="col-8 mx-auto">
        <h1>Title</h1>
        <Field type="title" name="title" />
        <ErrorMessage name="title" component="div" />
        <h1>Ingredient</h1>
  <button type="submit" id="recipeSubmit"> Submit </button>

I have the target set to the correct DOM element. Is there something I am missing?