Even passing active = true the area is not rendered

[MarcosSarges]

I need help. I want to use this lib to map a property map, and I need the circles to be rendered as soon as the image is loaded.

However, even when passing active={true} in the ImageMapper or within the areas array, the circle is not displayed.

import React from "react";
import ImageMapper from "react-img-mapper";
import areas from "./data.json"; // Import your areas JSON file

const Mapper = () => {
    const url =
        "https://raw.githubusercontent.com/img-mapper/react-img-mapper/refs/heads/master/resources/example.jpg";
    const name = "my-map";
    // GET JSON FROM BELOW URL AS AN EXAMPLE AND PUT IT HERE

    return (
        <ImageMapper
            src={url}
            name={name}
            areas={areas}
            isMulti
            active={true} // Set to true to enable active state
        />
    );
};

export default Mapper;

[
  {
    "id": "469f9800-c45a-483f-b13e-bd24f3fb79f4",
    "title": "Hardwood",
    "shape": "circle",
    "name": "1",
    "fillColor": "red",
    "strokeColor": "black",
    "coords": [10, 10, 5],
    "prefillColor": "red",
    "active": true
  },
  {
    "id": "1db62daa-22a4-4b02-b5c0-fffdcf77c66c",
    "title": "Carpet",
    "shape": "circle",
    "name": "2",
    "fillColor": "red",
    "strokeColor": "black",
    "coords": [20, 20, 5],
    "prefillColor": "red",
    "active": true
  }
]

[NishargShah]

Hello @MarcosSarges, can you please give me the example in codesandbox? I couldn't understand your issue.

[MarcosSarges]

I was unable to render the circle on the screen. I had used the test json as a base and for some reason it wasn't working (the json I sent above).

I fixed it by removing some props and left it like this:

[
 {
      "name": "6",
      "shape": "circle",
      "coords": [188, 103, 5],
      "preFillColor": "red"
  }
]

This way the circle was rendered