Gradient fails with even subArcs

[ewaninfo]

Thanks for your work on this. I'm having some issues with the gradient colors not displaying correctly.

Here is with gradient set to false, the subArcs are evenly spread:

With gradient set to true:

Here is my current implementation:

  <GaugeComponent
    style={{ width: 240 }}
    type="semicircle"
    minValue={0}
    maxValue={26}
    arc={{
      gradient: true,
      width: 0.15,
      padding: 0,
      subArcs: [
        { limit: 6.5, color: '#5BE12C' },
        { limit: 13, color: '#F5CD19' },
        { limit: 19.5, color: '#F68219' },
        { color: '#EA4228' },
      ],
    }}
    labels={{
      tickLabels: {
        hideMinMax: true,
      },
      valueLabel: {
        show: true,
        formatTextValue: value => value,
        style: {
          fontSize: '60px',
          fontWeight: '700',
          fill: '#22133A',
          textShadow: 'none',
        },
        maxDecimalDigits: 1,
      },
    }}
    value={6}
    pointer={{ type: 'arrow', color: '#22133A', width: 12, length: 0.2 }}
  />

I've also tried passing the colorArray, nbSubArcs, using length: 0.25 in the subArcs.

Please let me know if I'm missing something. Thanks.