how to change background image of a polygon in amcharts5?

Question

I am creating an interactive map using amCharts5 in JS and I want to replace a certain country, like Canada for example with an image from the place I've been in Canada and the image must have the shape of the country

I tried fill: am5.color.pattern("images/canada.jpg") but it's not working

  // Create root and chart
  const root = am5.Root.new("chartdiv");

  // Set themes
  root.setThemes([am5themes_Animated.new(root)]);

  const chart = root.container.children.push(
    am5map.MapChart.new(root, {
      panX: "rotateX",
      projection: am5map.geoNaturalEarth1(),
    })
  );

  // Create polygon series
  const polygonSeries = chart.series.push(
    am5map.MapPolygonSeries.new(root, {
      geoJSON: am5geodata_worldLow,
      exclude: ["AQ"],
    })
  );

  polygonSeries.mapPolygons.template.setAll({
    tooltipText: "{name}",
    templateField: "polygonSettings",
  });

  polygonSeries.mapPolygons.template.states.create("hover", {
    fill: am5.color(0x677935),
  });

  polygonSeries.data.setAll([
    {
      id: "US",
      polygonSettings: {
        fill: am5.color(0xff3c38),
      },
    },
    {
      id: "CA",
      polygonSettings: {
        fill: am5.color.pattern("images/canada.jpg"),//This is not working
      },
    },
    {
      id: "MX",
      polygonSettings: {
        fill: am5.color(0xff8c42),
      },
    },
  ]);
});