I have successfully implemented all the logic in this component, tailored to the <img> tag. Now, I am aiming to apply the same logic to the Image component. However, when attempting to do so, I encounter an error.

TypeError: Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Here is the modified code snippet:

import React, { useState, useRef, useEffect } from "react";

const ImageUploadCard = () => {
  const componentRef = useRef(null);
  const [componentWidth, setComponentWidth] = useState(0);
  const [componentHeight, setComponentHeight] = useState(0);

  useEffect(() => {
    // Function to update component width
    function updateComponentWidth() {
      if (componentRef.current) {
        const width = componentRef.current.getBoundingClientRect().width;
        const height = componentRef.current.getBoundingClientRect().height;

        console.log("Component width:", width);
        console.log("Component width:", height);
        setComponentWidth(width);
        setComponentHeight(height);
      }
    }

    // Update component width initially and add event listener for window resize
    updateComponentWidth();
    window.addEventListener("resize", updateComponentWidth);

    // Clean up event listener on component unmount
    return () => {
      window.removeEventListener("resize", updateComponentWidth);
    };
  }, []);

  const inputRef = useRef(null);
  const [previewImage, setPreviewImage] = useState(null);

  const handleImageChange = (event) => {
    const file = event.target.files[0];
    if (file && file.size > 5242880) {
      // File size exceeds the maximum limit
      // You can display an error message or handle it as needed
      console.log("File size exceeds the maximum limit (5MB)");

      return;
    }
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreviewImage(reader.result);
      };
      reader.readAsDataURL(file);
    } else {
      setPreviewImage(null);
    }
  };

  return (
    <div ref={componentRef} className="mb-6 md:pr-2">
      <div
        style={{ width: componentWidth }}
        className="dark:bg-jacarta-700 dark:border-jacarta-600 border-jacarta-100 group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed bg-white py-20 px-5 text-center"
        onClick={() => inputRef.current.click()} // Click event triggers file input
      >
        <div className="relative z-10 cursor-pointer">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            className="fill-jacarta-500 mb-4 inline-block dark:fill-white"
          >
            <path fill="none" d="M0 0h24v24H0z" />
            <path d="M16 13l6.964 4.062-2.973.85 2.125 3.681-1.732 1-2.125-3.68-2.223 2.15L16 13zm-2-7h2v2h5a1 1 0 0 1 1 1v4h-2v-3H10v10h4v2H9a1 1 0 0 1-1-1v-5H6v-2h2V9a1 1 0 0 1 1-1h5V6zM4 14v2H2v-2h2zm0-4v2H2v-2h2...
          </svg>
          <p className="dark:text-jacarta-300 mx-auto max-w-xs text-xs">
            Image formats: JPEG, PNG, JPG . Max size: 5 MB
          </p>
          <label>
            <input
              type="file"
              accept=".jpg, .jpeg, .png"
              onChange={handleImageChange}
              style={{ display: "none" }} // Hide the input visually
              ref={inputRef}
              // Set a max file size of 5MB (in bytes)
              // 5MB = 5 * 1024 * 1024 bytes
              // Adjust this value as needed
              max="5242880"
            />
          </label>
        </div>
      </div>

      {previewImage && (
        <div
          className="dark:bg-jacarta-700 dark:border-jacarta-600 border-jacarta-100 group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed bg-white py-20 px-5 text-center"
          style={{ width: componentWidth, height: 400 }} // Set width dynamically
        >
          <Image
            src={previewImage}
            alt="Preview"
            style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "cover" }}
          />
        </div>
      )}
    </div>
  );
};

export default ImageUploadCard;

The current working <img> tag implementation:

import React, { useState, useRef, useEffect } from "react";

const ImageUploadCard = () => {
  const componentRef = useRef(null);
  const [componentWidth, setComponentWidth] = useState(0);
  const [componentHeight, setComponentHeight] = useState(0);

  useEffect(() => {
    // Function to update component width
    function updateComponentWidth() {
      if (componentRef.current) {
        const width = componentRef.current.getBoundingClientRect().width;
        const height = componentRef.current.getBoundingClientRect().height;

        console.log("Component width:", width);
        console.log("Component width:", height);
        setComponentWidth(width);
        setComponentHeight(height);
      }
    }

    // Update component width initially and add event listener for window resize
    updateComponentWidth();
    window.addEventListener("resize", updateComponentWidth);

    // Clean up event listener on component unmount
    return () => {
      window.removeEventListener("resize", updateComponentWidth);
    };
  }, []);

  const inputRef = useRef(null);
  const [previewImage, setPreviewImage] = useState(null);

  const handleImageChange = (event) => {
    const file = event.target.files[0];
    if (file && file.size > 5242880) {
      // File size exceeds the maximum limit
      // You can display an error message or handle it as needed
      console.log("File size exceeds the maximum limit (5MB)");

      return;
    }
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreviewImage(reader.result);
      };
      reader.readAsDataURL(file);
    } else {
      setPreviewImage(null);
    }
  };

  return (
    <div ref={componentRef} className="mb-6 md:pr-2">
      <div
        style={{ width: componentWidth }}
        className="dark:bg-jacarta-700 dark:border-jacarta-600 border-jacarta-100 group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed bg-white py-20 px-5 text-center"
        onClick={() => inputRef.current.click()} // Click event triggers file input
      >
        <div className="relative z-10 cursor-pointer">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            className="fill-jacarta-500 mb-4 inline-block dark:fill-white"
          >
            <path fill="none" d="M0 0h24v24H0z" />
            <path d="M16 13l6.964 4.062-2.973.85 2.125 3.681-1.732 1-2.125-3.68-2.223 2.15L16 13zm-2-7h2v2h5a1 1 0 0 1 1 1v4h-2v-3H10v10h4v2H9a1 1 0 0 1-1-1v-5H6v-2h2V9a1 1 0 0 1 1-1h5V6zM4 14v2H2v-2h2zm0-4v2H2v-2h2zm0-4v2H2V6h2zm0-4v2H2V2h2zm4 0v2H6V2h2zm4 0v2h-2V2h2zm4 0v2h-2V2h2z" />
          </svg>
          <p className="dark:text-jacarta-300 mx-auto max-w-xs text-xs">
            Image formats: JPEG, PNG, JPG . Max size: 5 MB
          </p>
          <label>
            <input
              type="file"
              accept=".jpg, .jpeg, .png"
              onChange={handleImageChange}
              style={{ display: "none" }} // Hide the input visually
              ref={inputRef}
              // Set a max file size of 5MB (in bytes)
              // 5MB = 5 * 1024 * 1024 bytes
              // Adjust this value as needed
              max="5242880"
            />
          </label>
        </div>
      </div>

      {previewImage && (
        <div
          className="dark:bg-jacarta-700 dark:border-jacarta-600 border-jacarta-100 group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed bg-white py-20 px-5 text-center"
          style={{ width: componentWidth, height: 400 }} // Set width dynamically
        >
          <img
            src={previewImage}
            alt="Preview"
            style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "cover" }}
          />
        </div>
      )}
    </div>
  );
};

export default ImageUploadCard;

Desiring to replace the existing <img> tag with the latest version of the Image component while maintaining the same functionality.