// components/forms/ImageUpload.js
export default function ImageUpload({ ad, setAd }) {
  const handleUpload = (e) => {
    let files = e.target.files;
    files = [...files];
    if (files?.length) {
      setAd({ ...ad, uploading: true });
    } else {
      setAd({ ...ad, uploading: false });
    }
  };

  const handleDelete = async (photo) => {
    setAd({ ...ad, uploading: true });
    try {
      console.log("send API request to remove file");
    } catch (err) {
      console.log(err);
      setAd({ ...ad, removing: false });
    }
  };

  return (
    <>
      <div className="d-flex mt-4">
        <label className="btn btn-secondary">
          {ad.uploading
            ? "Uploading..."
            : ad.removing
            ? "Removing..."
            : "Upload photos"}
          <input
            onChange={handleUpload}
            type="file"
            accept="image/*"
            multiple
            hidden
          />
        </label>
      </div>
    </>
  );
}

Now import and use in AdCreate.js

<ImageUpload ad={ad} setAd={setAd} />