Everything was running smoothly on my local project, but encountered errors upon deploying to Vercel:

The properties imageURL and alt do not exist on type {}

Despite attempting to define the types based on suggestions from Stack Overflow, the issues persist.

I am utilizing Sanity as a CMS for fetching images to display on the front end.

import React from "react";
import leftarrow from "../public/arrowleft.png";
import rightarrow from "../public/arrowright.png";

interface Image {
  imageUrl: any;
  alt: any;
}

export default function GalleryBlock({ images }: any) {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  let initialPosition: number | undefined;
  let finalPosition: number | undefined;

  const decreaseIndex = () => {
    let prev = currentIndex == 0 ? images.length - 1 : currentIndex - 1;
    document.getElementById(`image-${currentIndex}`)!.style.opacity = "0";
    document.getElementById(`image-${prev}`)!.style.opacity = "1";
    setCurrentIndex(prev);
  };

  const increaseIndex = () => {
    let next = currentIndex == images.length - 1 ? 0 : currentIndex + 1;
    document.getElementById(`image-${currentIndex}`)!.style.opacity = "0";
    document.getElementById(`image-${next}`)!.style.opacity = "1";
    setCurrentIndex(next);
  };

  const changeToImage = (index: number) => {
    document.getElementById(`image-${currentIndex}`)!.style.opacity = "0";
    document.getElementById(`image-${index}`)!.style.opacity = "1";
    setCurrentIndex(index);
  };

  const swipeMove = () => {
    if (initialPosition !== undefined && finalPosition !== undefined) {
      if (finalPosition - initialPosition > 30) {
        decreaseIndex();
        initialPosition = undefined;
        finalPosition = undefined;
      } else if (initialPosition - finalPosition > 30) {
        increaseIndex();
        initialPosition = undefined;
        finalPosition = undefined;
      }
    }
  };

  return images.length > 0 ? (
    <div>
      <div className="flex px-[20px] pt-[20px] mb-[40px] md:px-[50px]">
        <div
          className={"hidden items-center text-center cursor-pointer sm:flex"}
          onClick={() => decreaseIndex()}
        >
          <img src={leftarrow.src} width={50} />
        </div>
        <div
          className={"w-full h-[500px] relative mx-[10px]"}
          onTouchStart={(e) => {
            initialPosition = e.touches[0].clientX;
          }}
          onTouchEnd={(e) => {
            finalPosition = e.changedTouches[0].clientX;
            swipeMove();
          }}
        >
          <img
            id={"image-0"}
            className={
              "absolute inset-x-1/2 transform -translate-x-1/2 inset-y-1/2 -translate-y-1/2 transition-opacity duration-1000 max-w-full max-h-full"
            }
            src={images[0].imageUrl}
            alt={images[0].alt}
          />
          {images.map((image: {}, index: number) =>
            index == 0 ? (
              ""
            ) : (
              <img
                key={index}
                className={
                  "absolute inset-x-1/2 transform -translate-x-1/2 inset-y-1/2 -translate-y-1/2 max-h-full max-w-full transition-opacity duration-1000"
                }
                style={{ opacity: "0" }}
                id={`image-${index}`}
                src={image.imageUrl}
                alt={image.alt}
              />
            )
          )}
        </div>
        <div
          className={"hidden items-center text-center cursor-pointer sm:flex"}
          onClick={() => increaseIndex()}
        >
          <img src={rightarrow.src} width={50} />
        </div>
      </div>
      <div
        className={
          "w-full h-[60px] flex justify-center sm:h-[80px] md:h-[100px]"
        }
      >
        <div className={"flex p-[10px]"}>
          <div
            className={"flex items-center text-center cursor-pointer mr-[10px]"}
            onClick={() => decreaseIndex()}
          >
            <img src={leftarrow.src} width={30} />
          </div>
          <div className={"flex"}>
            {(currentIndex > 1
              ? images.slice(currentIndex - 2, currentIndex)
              : images
                  .slice(images.length - 2 + currentIndex)
                  .concat(images.slice(0, currentIndex))
            ).map((image: {}, index: number) =>
              currentIndex == images.indexOf(image) ? (
                ""
              ) : (
                <img
                  key={index}
                  className={"max-h-full mx-[5px] cursor-pointer"}
                  onClick={() => changeToImage(images.indexOf(image))}
                  src={image.imageUrl}
                  alt={image.alt}
                />
              )
            )}
          </div>
          <div>
            <img
              className={"max-h-full mx-[5px] cursor-pointer"}
              style={{ outline: "solid silver 3px" }}
              src={images[currentIndex].imageUrl}
              alt={images[currentIndex].alt}
            />
          </div>
          <div className={"flex"}>
            {(currentIndex < images.length - 2
              ? images.slice(currentIndex + 1, currentIndex + 3)
              : images
                  .slice(currentIndex + 1, images.length)
                  .concat(images.slice(0, currentIndex - images.length + 3))
            ).map((image: {}, index: number) =>
              currentIndex == images.indexOf(image) ? (
                ""
              ) : (
                <img
                  key={index}
                  className={"max-h-full mx-[5px] cursor-pointer"}
                  onClick={() => changeToImage(images.indexOf(image))}
                  src={image.imageUrl}
                  alt={image.alt}
                />
              )
            )}
          </div>

          <div
            className={"flex items-center text-center cursor-pointer ml-[10px]"}
            onClick={() => increaseIndex()}
          >
            <img src={rightarrow.src} width={30} />
          </div>
        </div>
      </div>
    </div>
  ) : (
    <div />
  );
}