Chart.js: Aligning multiple side-by-side bar charts with inconsistent label widths

I’m using Chart.js (4.4) to create multiple bar charts side by side, each representing a different country. My current implementation uses separate <canvas> elements for each chart. However, I’m encountering an issue where the leftmost chart is smaller than the others due to its y-axis labels taking up more space, and the labels are getting cut off since they are quite long. How can I make the labels show fully and make sure that all of the bars are aligned?

My current attempt

Here is my current implementation:

COUNTRIES.map((country, index) => {
  return (
    <BarChart
      showLabel={index === 0}
      data={{
        labels: labels,   // Prizes and awards
        datasets: [
          {
            label: country,
            data: data[index],
          },
        ]

      }}
      width={100}
      height={300} />
  )
})

with the only notable chart options being indexAxis: 'y'