React HighCharts Custom Legend

Question

I'm trying to customise my chart's legend. My current legend needs to look like this legend.

Basically I need to make the circular icons rectangular and change the legend text color to correspond with the icon.

I've looked everywhere in the docs but I'm not finding a solution. This is how I configured the graph below (legend > itemStyle):

   useEffect(() => {
      Highcharts.chart(chart.current, {
         chart: {
            type: 'column',
            style: {
               fontFamily: '"Roboto", sans-serif',
            },
            height: 312,
         },
         credits: {
            enabled: false,
         },
         title: {
            text: null,
         },
         xAxis: {
            categories,
            labels: {
               step: 1,
               style: {
                  fontSize: '8px',
                  color: '#808992',
               },
               useHTML: true,
               formatter() {
                  const day = this.value.format('D');
                  if (moment().isSame(this.value, 'd')) {
                     return `<strong style="font-weight: 900; color: #0E2C47;">${day}</strong>`;
                  }
                  return day;
               },
            },
            gridLineWidth: 1,
         },
         yAxis: {
            min: 0,
            title: {
               text: `Collections ${showValue ? 'value' : 'count'}`,
               style: {
                  color: '#0E2C47',
                  fontWeight: '500',
                  fontSize: '12px',
                  letterSpacing: '0.3px',
                  lineHeight: '14.4px',
               },
            },
            labels: {
               style: {
                  fontSize: '8px',
                  color: '#808992',
               },
               useHTML: true,
               formatter() {
                  // eslint-disable-next-line react/no-this-in-sfc
                  const collection = this.value;
                  const format = Math.abs(collection) > 999 ? `${Math.sign(collection) * ((Math.abs(collection) / 1000).toFixed(1))}K` : Math.sign(collection) * Math.abs(collection);
                  return `${format}`;
               },
            },
            useHTML: true,
         },
         legend: {
            title: {
               text: 'Status',
               style: {
                  fontSize: '12px',
                  letterSpacing: '0.3px',
                  color: '#0A1944',
                  fontWeight: '500',
               },
            },
            itemStyle: {
               fontSize: '10px',
               letterSpacing: '0.25px',
               fontWeight: '500',
               color: '#0A1944',
            },
            reversed: 'true',
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'bottom',
            itemMarginBottom: 8,
            x: -30,
            y: -2,
         },
         plotOptions: {
            series: {
               stacking: 'normal',
            },
         },
         tooltip: {
            formatter() {
               // eslint-disable-next-line react/no-this-in-sfc
               return `<b>${this.y} ${this.series.name}</b><br/>${this.x.format('D MMM YYYY')}`;
            },
         },
         series: [{
            name: 'Draft',
            data: chartData.draft, // [...times(() => null, 30), ...times(random, 31)],
            color: collectionStateColors.draft, // processed
            legendIndex: 0,
         }, {
            name: 'Approved',
            data: chartData.approved,
            color: collectionStateColors.approved, // orange
            legendIndex: 1,
         }, {
            name: 'Expired',
            data: chartData.expired,
            color: collectionStateColors.expired, // purple
            legendIndex: 2,
         }, {
            name: 'Submitted',
            data: chartData.submitted,
            color: collectionStateColors.submitted, // purple
            legendIndex: 3,
         }, {
            name: 'Tracking',
            data: chartData.tracking,
            color: collectionStateColors.tracking, // light blue
            legendIndex: 4,
         }, {
            name: 'Processed',
            data: chartData.processed,
            color: collectionStateColors.processed, // dark blue
            legendIndex: 5,
         }],
      });
   });