Как добавить цвет фона в чартах React native svg?

Question

Я использую этот пакет для создания пользовательского кратного LineChart.

Единственная проблема, с которой я сталкиваюсь, заключается в том, что мне нужно добавить цвет фона между каждыми 2 значениями y (Я точно знаю, что будут только значения от 0 до 4). Поэтому мне нужно добавить цвет между «0-1», «1-2» и «2-3».

Вот текущий результат

и это то, что мне нужно для достижения

Вот мой код

<YAxis
   data={dataAxeY}
   style={{ marginBottom: xAxisHeight }}
   contentInset={verticalContentInset}
   svg={{ fill: "rgba(134, 65, 244, 0.5)", fontSize: 16 }}
   numberOfTicks={4}
 />
<View style={{ flex: 1, marginLeft: 10, borderWidth: 2 }}>
          <LineChart
            yAccessor={({ item }) => item.value}
            xAccessor={({ item }) => item.date}
            style={{ flex: 1 }}
            data={data}
            contentInset={verticalContentInset}
            svg={{
              strokeWidth: 3,
              stroke: "url(#gradient)",
            }}
            svg={{ stroke: "rgb(134, 65, 244)" }}
            curve={shape.curveNatural}
          >

          </LineChart>

          <XAxis
            data={dataAxeX}
            formatLabel={(_, index) => dataAxeX[index].dateName}
            contentInset={{ left: 10, right: 10 }}
            svg={{ fill: "rgba(134, 65, 244, 0.5)" }}
          />
        </View>
      </View>

Я попытался добавить Rect, который я определил цвет заливки, как это

const ColoredRect = (({ y }) => (
  <Rect
     x="0"
     y="0"
     width="100%"
     height="33%"
     fill="rgb(0,0,255)"
  />
))

Он был добавлен, но я хочу более универсальное c решение.

Я надеюсь, что вы можете помочь мне решить эту проблему.