I keep getting this error on staging environment: Error: Minified React error #31

Question

Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Error%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

I got this error on staging environment, I didn't get the error on dev environment.

It's a cms prooject:

Home.tsx:

export const Home = () => {
  return (
    <div className="mt-32 ml-10">
      <CmsNav title="Home" />
      <div className="flex  gap-3 mt-5">
        <div className="w-[73%]">
          <CmsAccess />
        </div>
        <div className="w-[24%] fixed right-0">
          <Editable number={10} />
        </div>
      </div>
    </div>
  );
};

CmsAccess.tsx:

export const CmsAccess = () => {
  const {
    heroBanner: { headerText, textBody, actionButtonName, image },
    mainCategory: { categoryHeader },
  } = useCmsHomeContext();
  const user = getAuthToken();
  const token = user?.token;
  const { toast } = useToast();

  const initialCard = {
    id: 1,
    header: "Assessing current market conditions and business",
    body: "Venture capitals",
    background_color: "dark",
    link: "",
    button_text: "Learn more",
    industry_category_id: "1",
  };

  const [cards, setCards] = useState([initialCard]);

  useEffect(() => {
    getAPI("/cms/home/cards", token)
      .then((res) => {
        if (res.status === 200) {
          setCards(res.data);
        }
      })
      .catch((err) => {
        toast({
          title: "Error",
          description: "Cannot get  cards",
          variant: "destructive",
        });
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  // const imageUrl = URL.createObjectURL(new File([image1 as BlobPart], "filename"));

  return (
    <div className=" bg-[#0000001a] rounded-lg p-5 ">
      <section className=" relative bg-[#103c4d] rounded-lg">
        <div className="h-[30rem] ml-36">
          <CustomImage
            alt="background Image"
            src={getLastUploadedImage(image)}
            quality={100}
            style={{ objectFit: "contain" }}
            width={1000}
            height={800}
            className="bg-center h-full rounded-2xl"
            sizes="100vw"
          />
        </div>
        <main className="absolute top-0 pl-8">
          <h1 className=" text-[2.4rem] w-[45%] font-Archivo mt-[2em]  font-[700] leading-[35px] tracking-[-1.411px] text-[#EBFFFB] ">
            {headerText}
          </h1>
          <p className="text-[#ffffffeb] text-[.988rem] font-EuclidCircular-A font-[400] leading-[130%] tracking-[0.126px] mt-10 w-[33%]">
            {textBody}
          </p>
          <div className=" mt-[3em]">
            <Button title={actionButtonName} />
          </div>
        </main>
      </section>

      {/* Main category */}
      <section className="my-10 mx-auto">
        <div className="">
          <h1 className="text-[#103c4c] w-2/5 mx-auto text-center text-4xl font-Archivo font-[700] leading-[94%] tracking-[-1.588px] ">
            {categoryHeader}
          </h1>
        </div>
        {/* <p className="text-[#969090] w-full mx-auto text-center my-5 text-[0.988rem] font-[Euclid Circular A] font-[400] leading-[17px]">
          {body}
        </p> */}
      </section>
      <section className="flex justify-between mx-10 gap-3 mt-4">
        {cards.map((item) => (
          <div
            className={`py-0 flex flex-col justify-between  w-full transform rounded-3xl border bg-[#103B4F] text-slate-800 sm:w-[18rem] ${
              item.background_color === "dark" ? "bg-[#103B4F]" : "bg-[#EAECEB]"
            }`}
            key={item.id}
          >
            <div className="flex items-center justify-center">
              <CustomImage
                alt="Get funding"
                src={fundingImg}
                width={100}
                height={50}
                className="w-[150px] rounded-3xl object-cover sm:w-[90%]"
              />
            </div>
            <div className="px-7 pb-2 sm:pb-6 pt-1 sm:pt-6">
              <h4 className="hidden sm:flex left-6 pb-3 text-[20px] md:text-[24px] font-[400] leading-5 text-[#FFFFFF] lg:text-[28px] sm:leading-7">
                {item.header}
              </h4>
              <h4 className="sm:hidden xs:p-4 justify-center items-center flex left-6 pb-3 text-[25px] md:text-[24px] font-[400] leading-5 text-[#FFFFFF] lg:text-[28px] sm:leading-7">
                {item.header}
              </h4>
              <p className="pb-4 text-[14px] font-[300] leading-5 text-[#CAD4D8] text-center sm:text-left">
                {item.body}
              </p>
            </div>
            <Link href="">
              <div className="px-7 pb-2 sm:pb-6 pt-1 sm:pt-6">
                <div className="flex justify-center items-center sm:justify-start">
                  <button className="mb-6 flex w-[7rem] items-center justify-between rounded-3xl border-[0.5px] border-slate-900 bg-[#FFFFFF] px-2 py-2 text-[13px] font-[400] lg:w-[8rem]">
                    <span className="font-[300]">{item.button_text}</span>
                    <div className="bg-[#103B4F] p-1 rounded-full">
                      <GoArrowUpRight color="#ffffff" />
                    </div>
                  </button>
                </div>
              </div>
            </Link>
            {/*<DropdownMenu>
              <DropdownMenuTrigger>
                <BsThreeDotsVertical color="#ffffff" size={20} />
              </DropdownMenuTrigger>
              <DropdownMenuContent className="bg-white w-[130%] rounded-lg">
                <DropdownMenuItem
                  className="space-x-4 cursor-pointer"
                  onClick={() =>
                    handleEditTestimony(testimonials[currentTestimonyIndex])
                  }
                >
                  <FaRegEdit size={20} />
                  <p>Edit</p>
                </DropdownMenuItem>
                <DropdownMenuItem
                  className="space-x-4 cursor-pointer"
                  onClick={handleDeleteTestimony}
                >
                  <MdDeleteOutline size={20} />
                  <p>Delete</p>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
            {deletedCard && (
              <button onClick={handleUndoDelete}>
                <div className="text-white border-[0.5px] border-white px-5 py-3 rounded-md">
                  Undo
                </div>
              </button>
            )}*/}
          </div>
        ))}
      </section>
      <section className="mt-20">
        <Partner />
      </section>
      <section className="mt-20">
        <HomeTestimonials />
      </section>
      {/* <section className="mt-20">
        <HomeCommunity />
      </section> */}
      <section className="mt-20">
        <HomeEventsCms />
      </section>
      <section className="mt-20">
        <HomeFaqsCms />
      </section>
      <section className="mt-20">
        <FooterBannerCms />
      </section>
      <section className="mt-20">
        <FooterCms />
      </section>
    </div>
  );
};

Editables.tsx:

"use client";

const HeroBanner = () => {
  const {
    handleInputChange,
    heroBanner,
    handleHeroBannerSubmit,
    loading,
    handleSectionChange,
  } = useCmsHomeContext();

  const { headerText, textBody, actionButtonName } = heroBanner;

  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
    handleInputChange("heroBanner", "image")(event);
  };

  const handleHeroBgClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  return (
    <form onSubmit={handleHeroBannerSubmit}>
      <FaqAccordion title="Hero Banner">
        <div className="text-[#576D75]">
          <CmsHeading
            title="Heading"
            placeholderText="Access Opportunities on Everything SME!"
            value={headerText}
            onChange={handleInputChange("heroBanner", "headerText")}
            name="herobanner-heading"
            onInput={(e) =>
              handleSectionChange("heroBanner", {
                headerText: e.currentTarget.innerText,
              })
            }
          />
          <CmsDescription
            title="Subheading"
            placeholderText="Empowering MSMEs with access to funding, information, infrastructure, and new markets "
            className="h-32"
            value={textBody}
            onChange={handleInputChange("heroBanner", "textBody")}
            name="herobanner-subheading"
          />
          <CmsButton
            buttonText="Button Text"
            placeholderText="Get Started"
            className="rounded-lg"
            value={actionButtonName}
            onChange={handleInputChange("heroBanner", "actionButtonName")}
            name="herobanner-buttonText"
          />
          <div
            onClick={handleHeroBgClick}
            className="flex items-center gap-3 py-1  px-4 border cursor-pointer border-[#083545] rounded-2xl"
          >
            <LuPlus color="#083545" />
            <p className="text-[#083545] font-semibold text-sm">
              Add Background Image
            </p>
          </div>
          <input
            // value={homeBgImg}
            type="file"
            id="imageInput"
            multiple
            accept="image/*"
            ref={fileInputRef}
            style={{ display: "none" }}
            onChange={handleImageChange}
          />
        </div>
        <div className="my-5">
          <Button disabled={loading} title="Save" />
        </div>
      </FaqAccordion>
    </form>
  );
};

const MainCategory = () => {
  const [value, setValue] = useState("Light");
  const {
    handleInputChange,
    mainCategory: { categoryHeader },
    handleMainCategorySubmit,
    loading,
    card: { buttonText, link, body, header },
    setCard,
  } = useCmsHomeContext();

  const fileInputRef = useRef<HTMLInputElement>(null);
  const handleImageChange = async (event: ChangeEvent<HTMLInputElement>) => {
    handleInputChange("mainCategory", "image")(event);
  };

  const handletestifierImgClick = (
    fileInputRef: RefObject<HTMLInputElement>
  ) => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  const bgMode = [
    { label: "Light", value: "light" },
    { label: "Dark", value: "dark" },
  ];

  return (
    <form onSubmit={handleMainCategorySubmit}>
      <FaqAccordion title="Main Categories">
        <div className="text-[#576D75] overflow-y-auto max-h-[300px]">
          <CmsHeading
            title="Heading"
            placeholderText="Access Opportunities on Everything SME!"
            value={categoryHeader}
            onChange={handleInputChange("mainCategory", "categoryHeader")}
            name="mainCategory-heading"
          />

          <SelectComp
            label="Card mode"
            items={bgMode}
            placeholder="Card Mode"
            classname="bg-white"
            onChange={setValue}
            name="bgColor"
            value={value}
          />
          <CmsSecondaryHeading
            title="Heading"
            placeholderText="Get Started"
            className="rounded-lg"
            value={header}
            onChange={(e) =>
              setCard((prevCard) => ({
                ...prevCard,
                header: e.target.value,
              }))
            }
            name="header"
          />

          <CmsDescription
            title="Description"
            placeholderText="Partnered with industry associations and government agencies to provide MSMEs with a supportive environment for growth."
            className="h-32"
            value={body}
            onChange={(e) =>
              setCard((prevCard) => ({
                ...prevCard,
                body: e.target.value,
              }))
            }
            name="body"
          />
          <CmsButton
            buttonText="Button Text"
            placeholderText="Learn More"
            className="rounded-lg"
            value={buttonText}
            onChange={(e) =>
              setCard((prevCard) => ({
                ...prevCard,
                buttonText: e.target.value,
              }))
            }
            name="buttonText"
          />
          <CmsSecondaryHeading
            title="Heading"
            placeholderText="Get Started"
            className="rounded-lg"
            value={link}
            onChange={(e) =>
              setCard((prevCard) => ({
                ...prevCard,
                link: e.target.value,
              }))
            }
            name="link"
          />
          <div
            className="flex items-center gap-3 py-1  px-4 border cursor-pointer border-[#083545] rounded-2xl"
            onClick={() => handletestifierImgClick(fileInputRef)}
          >
            <LuPlus color="#083545" />
            <p className="text-[#083545] font-semibold text-sm">
              Add Testifier Image
            </p>
          </div>
          <input
            type="file"
            accept="image/*"
            ref={fileInputRef}
            style={{ display: "none" }}
            onChange={handleImageChange}
            name="image"
          />
        </div>
        <div className="my-5">
          <Button type="submit" title="Save" disabled={loading} />
        </div>
      </FaqAccordion>
    </form>
  );
};

const OurPartners = () => {
  const {
    handleInputChange,
    ourPartners,
    handlePartnersSubmit,
    loading,
    // multipleImg,
  } = useCmsHomeContext();
  const { heading, subheading, images, headingColored } = ourPartners;

  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
    handleInputChange("ourPartners", "images")(event);
  };

  const handleAddLogoClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  const handleViewImage = (imageUrl: string) => {
    window.open(imageUrl, "_blank");
  };

  const handleDeleteImage = (imageUrl: string) => {
    // Filter out the deleted image from the state
    const updatedImages = images.filter((img) => img !== imageUrl);

    // Create an array of File objects using Blob
    const updatedFiles = updatedImages.map((img) => {
      const blob = new Blob([], { type: "image/*" });
      return new File([blob], img);
    });

    // Update the state with the new images array
    handleInputChange(
      "ourPartners",
      "images"
    )({
      target: {
        value: updatedImages,
        files: updatedFiles,
      },
    } as unknown as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>);
  };

  return (
    <form onSubmit={handlePartnersSubmit}>
      <FaqAccordion title="Our Partners">
        <div className="overflow-y-auto max-h-[300px]">
          <div className="flex items-center gap-4">
            <div
              className="flex items-center gap-3 py-1  px-4 border cursor-pointer border-[#083545] rounded-2xl"
              onClick={handleAddLogoClick}
            >
              <LuPlus color="#083545" />
              <p className="text-[#083545] font-semibold text-sm">
                Add new Logo
              </p>
            </div>
            <input
              type="file"
              id="imageInput"
              multiple
              accept="image/*"
              ref={fileInputRef}
              style={{ display: "none" }}
              onChange={handleImageChange}
            />
            <p className="text-xs text-[#576D75]">Only 10/12 logos</p>
          </div>
          <div className="grid grid-cols-2 gap-2 mt-5">
            {images?.map((imageUrl, index) => (
              <div
                key={index}
                className="relative group m-1 max-w-full max-h-full h-auto overflow-hidden cursor-pointer"
              >
                <CustomImage
                  key={index}
                  src={imageUrl}
                  alt={`Image ${index}`}
                  className="m-1 max-w-full max-h-full h-auto"
                  width={120}
                  height={120}
                  onClick={() => handleViewImage(imageUrl)}
                />
                <div className="absolute inset-0 bg-black border-4 rounded-lg border-black opacity-0 group-hover:opacity-50 transition-opacity"></div>

                <div className="absolute top-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity">
                  <DropdownMenu>
                    <DropdownMenuTrigger>
                      <BsThreeDotsVertical color="#ffffff" size={20} />
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className="bg-white w-[130%] rounded-2xl">
                      <DropdownMenuItem
                        className="space-x-4 cursor-pointer"
                        onClick={() => handleViewImage(imageUrl)}
                      >
                        <TbEye size={20} />
                        <p>View</p>
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        className="space-x-4 cursor-pointer"
                        onClick={() => handleDeleteImage(imageUrl)}
                      >
                        <MdDeleteOutline size={20} />
                        <p>Delete</p>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </div>
            ))}
          </div>

          <CmsSecondaryHeading
            title="Heading"
            placeholderText="Access Opportunities on Everything SME!"
            value={heading}
            onChange={handleInputChange("ourPartners", "heading")}
            name="partners-heading"
            className="rounded-lg"
          />
          <CmsSecondaryHeading
            title="Subheading"
            placeholderText="Partnered with industry associations and government agencies to provide MSMEs with a supportive environment for growth."
            value={subheading}
            onChange={handleInputChange("ourPartners", "subheading")}
            name="partners-subheading"
            className="rounded-lg"
          />
          <CmsSecondaryHeading
            title="Subheading"
            placeholderText="Partnered with industry associations and government agencies to provide MSMEs with a supportive environment for growth."
            value={headingColored}
            onChange={handleInputChange("ourPartners", "headingColored")}
            name="partners-headingColored"
            className="rounded-lg"
          />
          <div className="my-5">
            <Button type="submit" title="Save" disabled={loading} />
          </div>
        </div>
      </FaqAccordion>
    </form>
  );
};

const Testimonial = () => {
  const {
    handleTestimonialSubmit,
    loading,
    testimonial: {
      testimonialButtonText,
      testimonialHeading,
      testimonialSubheading,
    },
    handleImageChange,
    setTestimonials,
    body,
    testifier,
    position,
    fileInputRef,
    handleInputChange,
  } = useCmsHomeContext();

  const handletestifierImgClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  return (
    <form onSubmit={handleTestimonialSubmit}>
      <FaqAccordion title="Testimonials">
        <div className="overflow-y-auto max-h-[300px]">
          <CmsSecondaryHeading
            title="Subheading"
            placeholderText="Subheading"
            value={testimonialSubheading}
            onChange={handleInputChange("testimonial", "testimonialSubheading")}
            name="testimonialSubheading"
            className="rounded-lg"
          />
          <CmsHeading
            title="Heading"
            placeholderText="Heading"
            value={testimonialHeading}
            onChange={handleInputChange("testimonial", "testimonialHeading")}
            name="testimonialHeading"
          />
          <CmsSecondaryHeading
            title="Button Text"
            placeholderText="Testifier name"
            value={testimonialButtonText}
            onChange={handleInputChange("testimonial", "testimonialButtonText")}
            name="testimonialButtonText"
            className="rounded-lg"
          />
          <CmsDescription
            title="Testimony"
            placeholderText="Write Testimonies here"
            className="h-32"
            value={body}
            onChange={(event) =>
              setTestimonials((prevTestimonial) => ({
                ...prevTestimonial,
                body: event.target.value,
              }))
            }
            name="body"
          />
          <CmsSecondaryHeading
            title="Testifier"
            placeholderText="Testifier name"
            value={testifier}
            onChange={(event) =>
              setTestimonials((prevTestimonial) => ({
                ...prevTestimonial,
                testifier: event.target.value,
              }))
            }
            name="testifier"
            className="rounded-lg"
          />
          <CmsSecondaryHeading
            title="Position"
            placeholderText="Testifier Position"
            className="rounded-lg"
            value={position}
            onChange={(event) =>
              setTestimonials((prevTestimonial) => ({
                ...prevTestimonial,
                position: event.target.value,
              }))
            }
            name="position"
          />

          <div
            className="flex items-center gap-3 py-1  px-4 border cursor-pointer border-[#083545] rounded-2xl"
            onClick={handletestifierImgClick}
          >
            <LuPlus color="#083545" />
            <p className="text-[#083545] font-semibold text-sm">
              Add Testifier Image
            </p>
          </div>
          <input
            type="file"
            accept="image/*"
            ref={fileInputRef}
            style={{ display: "none" }}
            onChange={handleImageChange}
            name="image"
          />
          <div className="my-5">
            <Button type="submit" title="Add Testimonial" disabled={loading} />
          </div>
        </div>
        {/* <div className="my-5">
          <Button type="submit" title="Save" disabled={loading} />
        </div> */}
      </FaqAccordion>
    </form>
  );
};






interface EditablePros {
  number: number;
}
export const Editable: React.FC<EditablePros> = ({ number }) => {
  return (
    <div className="flex flex-col justify-between h-full">
      <div className=" rounded-tl-md px-5 pt-5  border-b bg-white h-full">
        <h2 className="text-[#083545] font-[600] leading-[28px] mb-6">
          Page has {number} editable Sections
        </h2>
        <div className=" mb-8 overflow-y-auto  max-h-[500px]">
          <HeroBanner />
          <MainCategory />
          <OurPartners />
          <Testimonial /> 
        </div>
      </div>
      {/* <div className="flex justify-end mr-5 gap-4 text-[1rem] mt-8 font-Archivo font-[500] leading-[20px]">
        <button
          type="button"
          className="text-[#829399] py-3 px-6 border rounded-[30px]"
        >
          Cancel
        </button>
        <button
          type="submit"
          className="bg-[#9cb5be]  py-3 px-14 rounded-[30px]  text-[#fff] border"
        >
          Publish
        </button>
      </div> */}
    </div>
  );
};

I have commented out all the code on the page, it still gives the error.