Hello, I am new with nextjs using javascript and I am trying to use that library called react-image-mapper I need to create circles in especific positions in front of an image, but I use map of react-image-mapper and not working with dynamic data can someone help me please.
Here is my code:

 
import React, { useState, useMemo } from "react";
import ImageMapper from "react-image-mapper";
const Mapper = ({mapData}) => {
  const [imgCoords, setImgCoords] = React.useState(0);
  //   const memoizedMap = useMemo(() => mapData, [mapData]);
  return (
    <>
      <div>
        <h1>Mapa</h1>
        <p className="text-red-500">{JSON.stringify(mapData)}</p>
        <ImageMapper
          src="planocasa.png"
          map={mapData}
          width={700}
          onImageClick={(evt) =>
            setImgCoords("" + evt.pageX + ", " + evt.pageY)
          }
        />
        <div>{imgCoords}</div>
      </div>
    </>
  );
};

export default Mapper;

And my data looks like these:

{
  "name": "Mapa de Actuadores",
  "areas": [
    {
      "name": "Pol",
      "shape": "circle",
      "coords": [
        471,
        800,
        5
      ],
      "fillColor": "red"
    },
    {
      "name": "nuevo",
      "shape": "circle",
      "coords": [
        814,
        753,
        5
      ],
      "fillColor": "red"
    }
  ]
}