Form submission creates duplicate FilePicker

Get Help and Help Others
1

I’m using filestack’s PickerDropPane component and each time I hit the submit button for my form it is duplicated, meaning the element is added multiple times to the html. It is not a field in my FormValues, rather I use its uploaded url as a state variable to update the data object before submitting.

import { PickerDropPane } from 'filestack-react'

const onSubmit: SubmitHandler<FormValues> = (data) => {
      data.fotoId = fotoId // state variable
    //createCall({ variables: { input: data } })
  }
...
<Form
onSubmit={onSubmit}
config={{ mode: 'onBlur' }}
formMethods={formMethods}
error={createMieterError || createFotoError}
>
...
<PickerDropPane // This component is recreated each time I press Submit
apikey={process.env.REDWOOD_ENV_FILESTACK_API_KEY}
onSuccess={onFileUpload}
/>
...
<Submit
className="rounded-lg border-2 border-gold-700 bg-gold-300 px-3 py-1 text-lg hover:bg-gold-500">
Create
</Submit>

Video Example