Hello! I created a bubble chart component, rendering it declaritavely in my Next.js application. I have my images stored in public, but when I run the component a generic image icon (sized appropriately) appears. I tried putting it in the same folder and they still don't appear. ChatGTP4 is also clueless. I know that Next.js handles images with <Image/>, but this doesn't working in an SVG. Here's some code for reference.

 <svg style={{ width: "100%", height: "100%" }}>
        {" "}
        {nodes.map((node, i) => (
          <g key={i} transform={`translate(${node.x},${node.y})`}>
            <circle r={sqrtScale(node.value)} fill="#fff" />
            <image
              href={node.url}
              width= {width}
              height={height}
              x={(sqrtScale(node.value) * -1.6) / 2}
              y={(sqrtScale(node.value) * -1.6) / 2}
            />
          </g>
        ))}
      </svg>