I'm trying to get the image sizes from a URL in my Next.js app so I can use the NextJs Image component. I'm fetching the images from a Headless CMS that only returns the urlm so I was trying to do something like:

const BuilderImage = ({ src, alt }) => {
  const [imageDimensions, setImageDimensions] = useState({ width: 1024, height: 500 });
  
  const img = new Image();

  useEffect(() => {
    img.src = src;

    img.onload = () => {
      setImageDimensions({
        height: img.height,
        width: img.width
      });
    };
  }, []);

  return (
    <Image
      src={src}
      width={imageDimensions.width}
      height={imageDimensions.height}
      alt={alt}
      objectFit="cover"
    />
  );
};

But it isn't working. My error:

TypeError: Cannot destructure property 'src' of '_param' as it is undefined.

Does anybody knows what's going on? thanks