قرار دادن چندین تصویر در یک محصول

سلام خسته نباشید
من یک صفحه ای دارم که محصولات رو تو اون میسازم و محصولم تو صفحه دیگه برای کاربر ها نمایش داده میشه
فقط تنها چیزی که میخوام اینه که بتونم برای هر محصولم چندین تصویر آپلود کنم
الان فقط تنها یه تصویرو میتونم برای هر محصولم که کتاب هست رو داشته باشم

این کدی هستش که کتاب ها رو میسازه و ویرایش میکنه

import React, { useState, useContext, useEffect } from "react";
import { useParams } from "react-router-dom";
import { GlobalState } from "../../GlobalState";
import LoadingUpload from "../../loading/LoadingUpload";
import axios from "axios";

const initialState = {
  title: "",
  _id: "",
};

function CreateBook() {
  const state = useContext(GlobalState);
  const [book, setBook] = useState(initialState);
  const [books] = state.booksAPI.books;
  const [images, setImages] = useState(false);
  const [loading, setLoading] = useState(false);
  const [isAdmin] = state.userAPI.isAdmin;
  const [token] = state.token;
  const param = useParams();
  const [onEdit, setOnEdit] = useState(false);
  const [callback, setCallback] = state.booksAPI.callback;

  useEffect(() => {
    if (param.id) {
      setOnEdit(true);
      books.forEach((book) => {
        if (book._id === param.id) {
          setBook(book);
          setImages(book.images);
        }
      });
    } else {
      setOnEdit(false);
      setBook(initialState);
      setImages(false);
    }
  }, [param.id, books]);

  const handleUpload = async (e) => {
    e.preventDefault();
    try {
      if (!isAdmin) return alert(err.response.data.msg);
      const file = e.target.files[0];

      if (!file) return alert("فایلی وجود ندارد");

      if (file.size > 1024 * 1024)
        return alert("سایز تصویر زیاد است");

      if (file.type !== "image/jpeg" && file.type !== "image/png")
        return alert("فرمت تصویر صحیح نمی باشد");

      let formData = new FormData();
      formData.append("file", file);

      setLoading(true);
      const res = await axios.post("/api/upload_book", formData, {
        headers: {
          "content-type": "multipart/form-data",
          Authorization: token,
        },
      });
      setLoading(false);
      setImages(res.data);
      // console.log(res);
    } catch (err) {
      alert(err.response.data.msg);
    }
  };

  const handleDestroy = async () => {
    try {
      if (!isAdmin) return alert(err.response.data.msg);
      setLoading(true);
      await axios.post(
        "/api/destroy_book",
        { public_id: images.public_id },
        {
          headers: { Authorization: token },
        }
      );
      setLoading(false);
      setImages(false);
    } catch (err) {
      alert(err.response.data.msg);
    }
  };

  const handleChangeInput = (e) => {
    const { name, value } = e.target;
    setBook({ ...book, [name]: value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      if (!isAdmin) return alert("You're not an admin");
      if (!images) return alert("عکس کتاب را آپلود کنید");
      if (onEdit) {
        await axios.put(
          `/api/books/${book._id}`,
          { ...book, images },
          {
            headers: { Authorization: token },
          }
        );
      } else {
        await axios.post(
          "/api/books",
          { ...book, images },
          {
            headers: { Authorization: token },
          }
        );
      }
      setCallback(!callback);
    } catch (err) {
      alert(err.response.data.msg);
    }
  };

  return (
    <div className="container mt-4">
      <div className="row">
                <form onSubmit={handleSubmit} className="mb-3">

                    <div className="mt-5">
                      <input
                        type="file"
                        name="file"
                        onChange={handleUpload}
                      />
                      {loading ? (
                        <div>
                          <LoadingUpload />
                        </div>
                      ) : (
                        <div>
                          <img src={images ? images.url : ""} alt="" />
                          <span
                            onClick={handleDestroy}
                            className=" fa-close"
                          />
                        </div>
                      )}
                    </div>

                    <input
                      type="text"
                      name="title"
                      id="title"
                      placeholder="نام کتاب"
                      required
                      value={book.title}
                      onChange={handleChangeInput}
                    />

                  <button type="submit">
                    {onEdit ? "آپدیت" : "ثبت"}
                  </button>
                </form>
              </div>
            </div>
  );
}

export default CreateBook;

ممنون میشم اگه بتونید راهنماییم کنید مشکلمو برطرف کنم