How can I use image as markers?

I am using an area chart from ApexCharts. Now I want to use a custom marker and show some images as markers. How can I do those things?

// finance page area chart

It was the path of images..
const imageUrls = [
  './assets/images/icon/ETH-2.png',
  './assets/images/icon/ETC.png',
  './assets/images/icon/BTC.png',
  './assets/images/icon/LTC.png'
];


  markers: {
    size: 10, // Adjust marker size
    strokeColors: '#FFFFFF',
    strokeWidth: 2,
    hover: {
      size: 35, // Size of marker on hover
    },
    custom: {
      images: imageUrls.map((url, index) => ({
        src: url,
        width: 30, // Adjust width based on your image size
        height: 30 // Adjust height based on your image size
      })),
      // Function to set the correct image for each data point
      fillColor: function (dataPointIndex) {
        return imageUrls[dataPointIndex % imageUrls.length];
      }
    },
  },
  tooltip: {
    enabled: false,
  },
  xaxis: {
    labels: {
      show: true, // Show x-axis text labels
    },
    axisBorder: {
      show: false, // Hides the x-axis border/line
    },
    axisTicks: {
      show: false, // Hides the x-axis ticks
    },
  },
  yaxis: {
    min: 0,
    max: 70,
    tickAmount: 7,
    labels: {
      show: true, // Show y-axis text labels
    },
    axisBorder: {
      show: true, // Show the y-axis border
      color: "#1F2336", // Change the y-axis border color
    },
  },
  grid: {
    show: false,
  },
};

// Initialize ApexCharts and render
var chart = new ApexCharts(document.querySelector("#show-amount-graph"), options);
chart.render();

I tried to do this, but it did not work.