Getting no output on the screen when using Metallic Paint Component

[Harrison-Isaiah]

1st these are the errors Metal.jsx:10 Uncaught TypeError: number 0 is not iterable (cannot read property Symbol(Symbol.iterator))
at Metal (Metal.jsx:10:37)
Metal.jsx:10 Uncaught TypeError: number 0 is not iterable (cannot read property Symbol(Symbol.iterator))
at Metal (Metal.jsx:10:37)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
react-dom.development.js:26962 Uncaught TypeError: number 0 is not iterable (cannot read property Symbol(Symbol.iterator))
at Metal (Metal.jsx:10:37)

**2nd** when these errors are resolved then there is not output on the screen 

I have used both tsx and jsx none of them are giving the output 

[DavidHDev]

Two things can cause this:

1. Your image is not the right format or color (should be a black SVG)
2. Your setup is incorrect

Make sure you follow the exact setup instructions posted in the usage example:

import MetallicPaint, { parseLogoImage } from "./MetallicPaint";
import { useState, useEffect } from 'react';

// replace with your own SVG
// NOTE: your SVG should have a bit of padding around the shape, to keep it from being cut off
// it should also have black fill color, to allow the metallic effect to show through the mask
import logo from '../../assets/logos/react-bits-logo-small-black.svg';

const Component = () => {
  const [imageData, setImageData] = useState<ImageData | null>(null);

  useEffect(() => {
    async function loadDefaultImage() {
      try {
        const response = await fetch(logo);
        const blob = await response.blob();
        const file = new File([blob], "default.png", { type: blob.type });

        const parsedData = await parseLogoImage(file);
        setImageData(parsedData?.imageData ?? null);

      } catch (err) {
        console.error("Error loading default image:", err);
      }
    }

    loadDefaultImage();
  }, []);

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <MetallicPaint 
        imageData={imageData ?? new ImageData(1, 1)} 
        params={{ edge: 2, patternBlur: 0.005, patternScale: 2, refraction: 0.015, speed: 0.3, liquid: 0.07 }} 
      />
    </div>
  );
}