My Controller

  public createFinancialDocumentsFilesUpload = ({ document, ...data }: CreateFinancialDocumentsFilesUploadReq) => {
    const formData = new FormData();
    formData.append('document', document);
    console.log(document, 'document');
    console.log('formData', formData);

    return this.requestWithToken<CreateFinancialDocumentsFilesUploadRes>({
      method: 'POST',
      url: FINANCIAL_DOCUMENTS_FILES_UPLOAD,
      data,
    });
  };
}

My handleSubmit

const handleSave = useCallback(
    handleSubmit(async (formData) => {
      const {
        transfer: {
          payment: { sum, expenseType: budgetItemId },
          isRegularPayment: isScheduled,
          invoiceForPayment,
        },
      } = formData;

      await apiCreateDocumentsFilesUpload({ document: invoiceForPayment });
    [],
  );

console.log data can be viewed in image

I am trying to use FormData to send user-entered data in a POST request with the fetch API. The problem is that when I create a new FormData object with the form that I've created, it keeps creating an empty object - no entries/keys/valuesenter image description here