troubleshoot this code

"import { useState, useEffect, useRef } from "react";
import randomColor from "randomcolor";

function TopographicOverlay({ imageUrl, overlays }) {
    const [clickedIndex, setClickedIndex] = useState(-1);
    const overlayRefs = useRef([]);
  
    useEffect(() => {
      // Check if all the overlays have been clicked
      const allClicked = overlays.every((overlay) => overlay.clicked);
      // If so, start expanding the overlays
      if (allClicked) {
        overlayRefs.current.forEach((ref, index) => {
          const size = overlays[index].size;
          const speed = Math.abs(255 - ref.current.color) / 255; // Speed
        const start = Date.now();
        const id = setInterval(() => {
          const timeElapsed = Date.now() - start;
          const percentComplete = Math.min(timeElapsed / (speed * 2000), 1); // Increase the size over a duration of 2 seconds
          const newSize = Math.max(size * percentComplete, size); // Don’t shrink the overlay once it has started expanding
          ref.current.style.width = `${newSize}px`;
          ref.current.style.height = `${newSize}px`;
        }, 10);
        return () => clearInterval(id);
      });
    }
  }, [overlays]);

  function handleOverlayClick(index) {
    const updatedOverlays = [...overlays];
    updatedOverlays[index].clicked = true;
    setClickedIndex(index);
  }

  function calculateOverlayColor(x, y, imageData) {
    const pixelIndex = (y * imageData.width + x) * 4; // Each pixel has 4 values (red, green, blue, and alpha)
    const red = imageData.data[pixelIndex];
    const green = imageData.data[pixelIndex + 1];
    const blue = imageData.data[pixelIndex + 2];
    return (red + green + blue) / 3; // Color value is the average of the RGB values
  }

  function renderOverlays() {
    const image = new Image();
    image.src = imageUrl;
    image.addEventListener("load", () => {
      const canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      const context = canvas.getContext("2d");
      context.drawImage(image, 0, 0);
      const imageData = context.getImageData(0, 0, image.width, image.height);
      return overlays.map((overlay, index) => {
        const overlayColor = randomColor({ format: "rgb" });
        
        const size = clickedIndex === -1 ? 30 : overlay.clicked ? 30 : 0; // Only show overlays that have been clicked or all of them if no overlay has been clicked yet
        return (
          <div
            key={overlay-{index}}
            ref={(el) => (overlayRefs.current[index] = el)}
            className="topographic-overlay"
            style={{
                backgroundColor: overlayColor,
                width: `${size}px`,
                height: `${size}px`,
                top: `${overlay.y}px`,
                left: `${overlay.x}px`,
                }}
            onClick={() => handleOverlayClick(index)}
          />
        );
      });
    });
  }

  return (
    <div className="topographic-overlay-container">
      <img src={imageUrl} className="topographic-image" alt="Topographic Map" />
      {renderOverlays()}
    </div>
  );
}

export default TopographicOverlay"