Grid issue after grouping bar chart in react-native-svg-charts

Question

I managed to make group bar chart (react-native-svg-charts = ^5.4.0 in react-native 0.71.2) however I'm struggling to redefine the grid and labels on the axis. Since, the chart thinks x & y axis are swapped it also applies it to the grid. X should be 24 rather than 7 and Y 7 instead of 24.This then caused issues when I try to add custom labels on the top of the bars as the are then randomly scattered. Anyone knows the solution? See the code below:

const entries = [
    {name: 'entry1' , text:'Entry 1', color:'#9B00D1'},
    {name: 'entry2', text:'Entry 2',color:'#01828E'},
    {name: 'entry3', text:'Entry 3',color:'#527577'},
    {name: 'entry4', text:'Entry 4',color:'#E40C66'},
    {name: 'entry5', text:'Entry 5',color:'#87571E'},
    {name: 'entry6', text:'Entry 6',color:'#FFC700'},
    {name: 'entry7', text:'Entry 7',color:'#31850A'},
    {name: 'entry8', text:'Entry 8',color:'#4744F2'},
  ];

const generateRandomNumber= () => { return Math.floor(Math.random() * 10) + 1; }

const getDayData= (entry, color, hourIndex, colorIndex) => { 
    const randomValue = generateRandomNumber();
    return {
      color: color.toString(), 
      hour: hourIndex, 
      svg: {
      fill: color,
      }, 
      y: randomValue,
      x: colorIndex
    }
};

const getData= (noOfHours) => {
    const dataArray = [];    
    for (let colorIndex = 0; colorIndex < entries.length; colorIndex++) {
      let color = entries[colorIndex].color;
      let entry = entries[colorIndex].name;
      let colorDataArray = [];
      for (let hourIndex = 0; hourIndex < noOfHours; hourIndex++) {
        colorDataArray.push(getDayData(entry, color, hourIndex, colorIndex));
      }
      let dataArrayObject = {
        entry: entry,
        data: colorDataArray
      }
      dataArray.push(dataArrayObject);
    }

    //console.log(JSON.stringify(dataArray));
    return dataArray;
  }
  
const chartData = getData(24);
  
<BarChart
  style={ { height: 200, width: 300 } }
  data={chartData}
  yAccessor={({ item }) => item.y}
  xAccessor={({ item }) => item.x}
  contentInset={ { top: 20, bottom: 30 } }
  >
  <Grid direction='BOTH'></Grid>
  {/* <Labels /> */}
  {/* <ChartPoints /> */}
</BarChart>