У меня есть сервер, где обрабатываются пост запросы на item:
app.post('/items', (req, res) => {
    const newItem = { id: idCounter++, ...req.body };
    PROJECTS_DATA.push(newItem);
    res.status(201).json(newItem);
});


Вот компонент страницы создания товара с формой:

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { createItem } from "../../api";
import { ItemForm } from "../../components/ItemForm/ItemForm/ItemForm";
import styles from "./CreateItemPage.module.css";

export const CreateItemPage = () => {
  const navigate = useNavigate();

  const handleSubmit = async (data) => {
    try {
      await createItem(data);
      navigate("/");
    } catch (error) {
      console.error("Failed to create item:", error);
    }
  };

  return (
    <div className={styles.formContainer}>
      <div className={styles.formWrapper}>
        <h1 className={styles.article}>Create Item</h1>
        <ItemForm onSubmit={handleSubmit} defaultValues={{}} />

        <div className={styles.loader}>Creating item...</div>

        <button className={styles.link} onClick={() => navigate("/")}>
          Back to List
        </button>
      </div>
    </div>
  );
};


Вот сама форма:
import { useEffect } from "react";
import { useForm, useFieldArray } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { FormInput } from "../FormInput/FormInput";
import { FormSelect } from "../FormSelect/FormSelect";
import { RadioGroup } from "../RadioGroup/RadioGroup";
import { EndpointFields } from "../EndpointFields/EndpointFields";
import { Button } from "../Button/Button";
import { schema } from "./validationSchema";
import { extractChangedFields, extractFilledFields } from "./formHelpers";
import styles from "./ItemForm.module.css";

export const ItemForm = ({ defaultValues = {}, onSubmit }) => {
  const isEdit = Boolean(
    defaultValues && Object.keys(defaultValues).length > 0
  );

  const {
    register,
    handleSubmit,
    watch,
    control,
    formState: { errors, dirtyFields },
    reset,
  } = useForm({
    defaultValues,
    resolver: yupResolver(schema),
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: "microtasks",
  });

  const showServices = watch("showServices") === "yes";

  useEffect(() => {
    reset(defaultValues);
  }, [defaultValues, reset]);

  const handleFormSubmit = (data) => {
    let payload = {};

    if (isEdit) {
      payload = extractChangedFields(data, dirtyFields);
    } else {
      payload = extractFilledFields(data);
    }
    onSubmit(payload);
  };

  return (
    <div className={styles.formContainer}>
      <form
        onSubmit={handleSubmit(handleFormSubmit)}
        className={styles.formWrapper}
      >
        <div className={`${styles.formGrid} ${styles.grid3}`}>
          <FormInput
            label="Title"
            id="title"
            register={register("title")}
            error={errors.title}
          />
          <FormSelect
            label="Type"
            id="Type"
            register={register("type")}
            options={[
              { value: "", label: "Select project type" },
              { value: "residential", label: "Residential" },
              { value: "commercial", label: "Commercial" },
              { value: "public-park", label: "Public Park" },
            ]}
            error={errors.type}
          />
          <FormInput
            label="Price*"
            id="price"
            type="number"
            register={register("price")}
            error={errors.price}
          />
        </div>
        <div className={`${styles.formGrid} ${styles.grid2}`}>
          <FormInput
            label="Location"
            id="location"
            register={register("location")}
            error={errors.location}
          />
          <FormInput
            label="Description"
            id="description"
            register={register("description")}
            error={errors.description}
          />
        </div>

        <RadioGroup
          label="Show services?"
          register={register("showServices")}
          options={[
            {
              value: "yes",
              label: "Yes",
              defaultChecked: defaultValues?.showServices === "yes",
            },
            {
              value: "no",
              label: "No",
              defaultChecked: defaultValues?.showServices !== "yes",
            },
          ]}
          error={errors.showServices}
        />
        {showServices && (
          <div className={`${styles.formGrid} ${styles.grid2}`}>
            <FormSelect
              label="Service"
              id="service"
              register={register("service")}
              options={[
                { value: "", label: "Select service" },
                { value: "lighting", label: "Lighting" },
                { value: "irrigation", label: "Irrigation" },
                { value: "maintenance", label: "Maintenance" },
                {
                  value: "installation",
                  label: "Installation",
                },
                {
                  value: "design-consultation",
                  label: "Design Consultation",
                },
              ]}
              error={errors.service}
            />
            <FormInput
              label="Comment"
              id="comment"
              type="text"
              register={register("comment")}
              error={errors.comment}
              placeholder="Enter comment"
            />
          </div>
        )}
        <EndpointFields
          fields={fields}
          register={register}
          errors={errors}
          append={append}
          remove={remove}
        />
        <div className={styles.formActions}>
          <Button
            type="submit"
            className={styles.actionButton}
            label="Submit"
          />
        </div>
      </form>
    </div>
  );
};



Вот функция extractFilledFields:
export const extractFilledFields = (data) => {
  let filled = {};

  for (const key in data) {
    const value = data[key];

    if (typeof value === "object" && value !== null) {
      if (Array.isArray(value)) {
        const arrayFilled = value
          .map((item) => extractFilledFields(item))
          .filter((item) => Object.keys(item).length > 0);
        if (arrayFilled.length > 0) {
          filled[key] = arrayFilled;
        }
      } else {
        const nestedFilled = extractFilledFields(value);
        if (Object.keys(nestedFilled).length > 0) {
          filled[key] = nestedFilled;
        }
      }
    } else if (value !== undefined && value !== null && value !== "") {
      filled[key] = value;
    }
  }

  return filled;
};

Мы сейчас говорим именно про создание нового элемента


и вот функция createItem: 
const handleApiRequest = async (request) => {
  try {
    const response = await request;
    return response;
  } catch (error) {
    console.error("API error:", error);
    throw error;
  }
};

export const updateItem = (id, data) =>
  handleApiRequest(api.put(`/items/${id}`, data));
export const createItem = (data) => {
  console.log(data);
  handleApiRequest(api.post("/items", data));
};

И вот есть компонент endpointFields, который добавляет моему объекту, создаваемому в форме микротаски, но если их вообще не добавлять, то будет ошибка. Как сделать так, чтобы в таком случае массив микротасок был пустым, а не отсутствовал вообще, ведь у меня обработка там есть на отображение, а сейча я получаю ошибку: Cannot read property lngth of undefined 

Вот  сделал лог перед отправкой данных:
const handleSubmit = async (data) => {
    try {
      console.log("Перед созданием:", data);
      await createItem(data);
      navigate("/");
    } catch (error) {
      console.error("Failed to create item:", error);
    }
  };

  return (
    <div className={styles.formContainer}>
      <div className={styles.formWrapper}>
        <h1 className={styles.article}>Create Item</h1>
        <ItemForm onSubmit={handleSubmit} defaultValues={{}} />
        <button className={styles.link} onClick={() => navigate("/")}>
          Back to List
        </button>
      </div>
    </div>
  );
};

И вижу, что в объекте data нету поля microtasks