Группировка нескольких данных с помощью react-native-svg-charts

Привет, я хочу получить такую ​​диаграмму с двумя наборами данных.

с помощью react-native-svg-charts

и мои данные выглядят так

const data1 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 5},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 10},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 20},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 30},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 10},
];
const data2 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 15},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 21},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 32},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 44},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 75},
];
const data3 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 50},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 81},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 77},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 33},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 21},
];

и я группирую их как одни данные, подобные этому

const barDataY = [
    {
      data: data1,
      svg: {
        stroke: 'red',
        strokeWidth: 2,
      },
    },
    {
      data: data2,
      svg: {
        stroke: 'dodgerblue',
        strokeWidth: 2,
      },
    },
    {
      data: data3,
      svg: {
        stroke: 'grey',
        strokeWidth: 2,
      },
    },
  ];

вместо того, чтобы получить диаграмму, которую я хочу, моя диаграмма выглядит так

так как я могу сгруппировать их по наборам данных?

ниже мой полный код

import React, {useEffect} from 'react';
import {View, StyleSheet} from 'react-native';
import {BarChart, Grid, YAxis, XAxis} from 'react-native-svg-charts';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import Colors from './App/Configs/Colors';

const data1 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 5},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 10},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 20},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 30},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 10},
];
const data2 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 15},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 21},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 32},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 44},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 75},
];
const data3 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 50},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 81},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 77},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 33},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 21},
];

const SummaryBarChart = ({barData, xData, bardata2}) => {
  const contentInset = {top: 50, bottom: 20};
  let mainData = [{data: bardata2}, {data: barData}];

  const barDataY = [
    {
      data: data1,
      svg: {
        stroke: 'red',
        strokeWidth: 2,
      },
    },
    {
      data: data2,
      svg: {
        stroke: 'dodgerblue',
        strokeWidth: 2,
      },
    },
    {
      data: data3,
      svg: {
        stroke: 'grey',
        strokeWidth: 2,
      },
    },
  ];

  return (
    <View style={styles.barcharContainer}>
      <View style={{width: wp('80%')}}>
        <View style={{height: 200, flexDirection: 'row'}}>
          <BarChart
            contentInset={contentInset}
            style={{height: 200, width: wp('80%')}}
            data={barDataY}
            numberOfTicks={5}
            yAccessor={({item}) => {
              console.log(item);
              return item.value;
            }}>
            <Grid></Grid>
          </BarChart>
        </View>
      </View>
    </View>
  );
};

export default SummaryBarChart;