How to handle array Post request to prisma in NextJS

I’m trying to post an array through Prisma to db but with no success

here is my initial data and form validation :

type ModifierFormProps = {
  initialData: {
    modifier: Modifier | null;
    modifierItems: ModifierItem[];
    name?: string;
    price?: number;
    id?: string;
    // modifierPrices: ModifierPrice[];
  };
};

const formSchema = z.object({
  modifierName: z.string().min(1),
  modifierItems: z.array(
    z.object({
      name: z.string().optional().nullable(),
      id: z.string().optional().nullable(),
      price: z.number().optional().nullable(),
    })
  ),

});

and

  const form = useForm<ModifierFormValues>({
    resolver: zodResolver(formSchema),

    defaultValues: initialData
      ? {
          ...initialData,
          modifierItems: [{ name: "", id: "", price: 0.0 }],
          // modifierPrices: [{ price: 0.0, id: "", name: "" }],
        }
      : {
          modifierName: "",
          modifierItems: [{ name: "", id: "", price: 0.0 }],
          // modifierPrices: [{ price: 0.0, id: "", name: "" }],
        },
  });

this is the how I handled the submission :

  const onSubmit = async (data: ModifierFormValues) => {
    try {
      setLoading(true);
      console.log(data);
      if (initialData) {
        await axios.patch(
          `/api/${params.storeId}/modifiers/${params.modifierId}`,
          data
        );
      } else {
        await axios.post(`/api/${params.storeId}/modifiers`, data);
      }

      router.refresh();
      router.push(`/${params.storeId}/modifiers`);
      toast.success(toastMessage);
    } catch (error) {
      toast.error("Check all the field values");
    } finally {
      setLoading(false);
    }
  };

the body console log is like :
,,,
{
modifierName: ‘test’,
modifierItems: [ { name: ‘item 1’, id: ”, price: 1 } ]
}
,,,,

the console log from the form inputs as initial data passed to the post method :

enter image description here

this is what I’ve tried to handle post but the name and price doesn’t get saved in the db and when I get to console log the result of the sent data I get no price or name just the modifierName

export async function POST(
  req: Request,
  {
    params,
  }: {
    params: {
      storeId: string;
    };
  }
) {
  try {
    const { userId } = auth();
    const body = await req.json();

    const {
      modifierName,
      modifierItem,
    }: {
      modifierName: string;
      modifierItem: Array<{ name: string; price: number }>;
    } = body;

    console.log(body);
    if (!userId) {
      return new NextResponse("Unauthenticated", { status: 401 });
    }

    if (!params.storeId) {
      return new NextResponse("Store ID is required", { status: 400 });
    }

    const storeByUserId = await prismadb.store.findFirst({
      where: {
        id: params.storeId,
        userId,
      },
    });

    if (!storeByUserId) {
      return new NextResponse("Unauthorized", { status: 403 });
    }

   
    const modifier = await prismadb.modifier.create({
      data: {
        modifierName,
        storeId: params.storeId,
        ...(modifierItem && {
          modifierItem: {
            createMany: {
              data: {
                name: modifierItem.map((item) => item.name),
                price: modifierItem.map((item) => item.price),
              },
            },
          },
        }),
      },
    });

    return NextResponse.json(modifier);
  } catch (error) {
    console.log("[MODIFIER_POST]", error);
    return new NextResponse("Internal Error", { status: 500 });
  }
}

this is the result of the sent data :

{
id: ‘a12cba53-530a-4cbf-8f39-e66ba193611c’,
modifierName: ‘1’,
name: ”,
createdAt: ‘August 5th , 2023 at 10:21 AM’,
price: 0
}

any one can help ?

I know that and I’m sure that’s I’m making a mistake inside the create method to prisma but I couldn’t figure out how to do it !