删除已上传图片时触发store按钮而非删除动作的问题求助

当前图片上传功能正常，但删除已上传图片时未执行删除动作，反而触发了store按钮。已补充删除按钮相关代码，调整后问题依旧，以下是相关代码，请协助排查：

初始存储图片代码 #

public function store(Request $request)
{
    $data = $this->validate($request, [
        'name' => 'required',
        'description' => 'required|max:150',
        'category_id' => 'required',
        'type_id' => 'required',
        'price' => 'required|numeric|min:0|not_in:0',
        'start_date' => 'required',
        'end_date' => 'required',
        'is_active' => 'required',
        'images.*' => 'image|max:2048', // max file size: 2MB
        'documents.*' => 'file|max:2048', // max file size: 2MB
    ]);

    $product = DB::table('products')
        ->insertGetId([
            'name' => $data['name'],
            'description' => $data['description'],
            'type_id' => $data['type_id'],
            'category_id' => $data['category_id'],
            'price' => $data['price'],
            'start_date' => $data['start_date'],
            'end_date' => $data['end_date'],
            'is_password' => $request['is_password'],
            'is_stamping' => $request['is_stamping'],
            'created_at' => now(),
        ]);

    // handle image uploads
    if ($request->hasFile('images')) {
        $i = 1;
        foreach ($request->file('images') as $image) {
            $name = $request['name'] . '-' . $i;
            $now = new DateTime();
            $fileName = Str::slug($request['name']) . '-' . $now->format('dmYHis') . '-' . $i . '.' . $image->getClientOriginalExtension();
            //$fileName = Str::slug($request['name']) . '-' . time() . '.' . $image->getClientOriginalExtension();
            $path = $image->storeAs('public/Product/Images', $fileName);
            DB::table('product_images')->insert([
                'product_id' => $product,
                'name' => $name,
                'file_path' => Storage::url($path),
                'created_at' => now(),
            ]);
            $i++;
        }
    }
    return Redirect::route('produk.index');
}

编辑图片（删除/新增）代码 #

public function update(Request $request, $id)
{
    $data = $this->validate($request, [
        'name' => 'required',
        'description' => 'required|max:150',
        'category_id' => 'required',
        'type_id' => 'required',
        'price' => 'required|numeric|min:0|not_in:0',
        'start_date' => 'required',
        'end_date' => 'required',
        'is_active' => 'required',
        'images.*' => 'image|max:2048', // max file size: 2MB
        'documents.*' => 'file|max:2048', // max file size: 2MB
    ]);

    DB::table('products')
        ->where('id', $id)
        ->update([
            'name' => $data['name'],
            'description' => $data['description'],
            'type_id' => $data['type_id'],
            'category_id' => $data['category_id'],
            'price' => $data['price'],
            'start_date' => $data['start_date'],
            'end_date' => $data['end_date'],
            'is_active' => $data['is_active'],
            'is_password' => $request['is_password'],
            'is_stamping' => $request['is_stamping'],
            'updated_at' => now(),
        ]);

    // handle image uploads
    if ($request->hasFile('images')) {
        //DB::table('product_images')->where('product_id', $id)->delete();
        //Storage::deleteDirectory('public/Product/Images/' . $id);
        foreach ($request->file('images') as $image) {
            $name = $request['name'] . '-' . $id;
            $now = new DateTime();
            $fileName = Str::slug($request['name']) . '-' . $now->format('dmYHis') . '-' . $id . '.' . $image->getClientOriginalExtension();
            $path = $image->store('public/Product/Images/' . $fileName);
            DB::table('product_images')->insert([
                'product_id' => $id,
                'file_path' => Storage::url($path),
                'created_at' => now(),
            ]);
        }
    }
    return Redirect::route('produk.index');
}

表单提交相关代码 #

const formik = useFormik({
    initialValues: {
        name: action === "create" ? "" : `${data.name}`,
        description: action === "create" ? "" : `${data.description}`,
        category_id: action === "create" ? "" : `${data.category_id}`,
        type_id: action === "create" ? "" : `${data.type_id}`,
        price: action === "create" ? "" : `${data.price}`,
        is_active: action === "create" ? "" : `${data.is_active}`,
        start_date: action === "create" ? "" : `${data.start_date}`,
        end_date: action === "create" ? "" : `${data.end_date}`,
        // is_password: action === "create" ? "" : `${data.is_password}`,
        // is_stamping: action === "create" ? "" : `${data.is_stamping}`,
    },
    validationSchema: validationSchema,

    onSubmit: async (values) => {
        try {
            switch (action) {
                case "create":
                    await post(route("produk.store"));
                    Swal.fire({
                        text: "Maklumat produk berjaya disimpan",
                        icon: "success",
                    });
                    break;
                case "update":
                    await put(route("produk.update", product.id), data);
                    Swal.fire({
                        text: "Maklumat produk berjaya dikemaskini",
                        icon: "success",
                    });
                    break;
            }
        } catch (error) {
            Swal.fire({
                icon: "error",
                title: "Oops...",
                text: "Something went wrong!",
            });
        }
    },
});

return (
    <form method={"post"} onSubmit={handleValidationAndSubmit}>
        <h3 className={"font-bold text-xl mb-4"}>
            {action === "create" ? "Daftar" : "Kemaskini"} Produk
        </h3>

        ....................
</form>
);

FileUpload组件代码（含删除按钮） #

<FileUpload
    uploadedFiles={product_images?.flatMap((file) => file)}
    product={product}
    action={action}
    setData={setData}
    onError={(error) => {
            Swal.fire({
            text: error,
            icon: "error",
    });
    }}
            name="images"
            buttonText="Muat Naik"
            allowedFileTypes={[
                "image/png",
                "image/jpg",
                "image/jpeg",
            ]}
    />

添加产品时移除文件的代码 #

const removeFileUpload = (e, index) => {
    const updatedFileUpload = [...fileUpload];
    updatedFileUpload.splice(index, 1);
    setFileUpload(updatedFileUpload);
    setData(name, updatedFileUpload);
};

编辑/更新产品时的删除图片按钮代码 #

return (
    ...........
    
    <button
       onClick={() => removeFileUpload(index)}
       className="outline-none border-none"
     >
       <FaTimes className="text-red-600" />
    </button>
.....
);

内容的提问来源于stack exchange，提问作者Jabri Juhinin