Highcharts legend item not displaying properly (until window is resized)

Question

I have a chart with legend items which are overlapping each other (this is the image for itemDistance option set to 20 - clearly the distance between items is less than 20px, it seems that 20px is item distance between legend symbols):

The chart is fixed and legend is displayed properly only after resizing the window (image for exactly same configuration object - the only window has been resized):

I can't figure out what I have done wrong or if I have just encountered a bug in Highcharts. I'm using Highcharts v. 7.2.0 with HighchartsReactOfficial library v. 2.2.2. My configuration object:

const options: Highcharts.Options = {
  chart: {
    type: 'spline',
    spacingLeft: 40,
    spacingRight: 40,
  },
  title: {
    style: {
      display: 'none',
    },
  },
  subtitle: {
    style: {
      display: 'none',
    },
  },
  credits: {
    enabled: false,
  },
  legend: {
    itemDistance: 20,
    itemStyle: {
      color: '#7990A1',
    },
  },
  plotOptions: {
    series: {
      marker: {
        symbol: 'circle',
        lineWidth: 1,
      },
      shadow: true,
    },
  },
  series: [{
      name: 'test1',
      type: 'spline',
      color: '#576A7B',
      data: [23, 3, 33, 54, 29, 38],
    },
    {
      name: 'test2',
      type: 'spline',
      color: '#FE7B1A',
      data: [45, 21, 76, 43, 67, 59],
    },
    {
      name: 'test3',
      type: 'spline',
      color: '#00BAFF',
      data: [7, 19, 5, 9, 12, 11],
    },
    {
      name: 'test4',
      type: 'spline',
      color: '#000000',
      data: [40, 3, 71, 20, 28, 31],
    },
  ],
  yAxis: {
    title: {
      style: {
        display: 'none',
      },
    },
    showFirstLabel: false,
  },
  xAxis: {
    categories: ['2019-05-15', '2019-05-16', '2019-05-17', '2019-05-18', '2019-05-19', '2019-05-20'],
  },
};

Used by rendering component:

<HighchartsReact highcharts={Highcharts} options={options} />

Help will be greatly appreciated.