How to specify the data to render on y or y1 axis, based on the yAxisID in the data being provided to the line chart using react-native-charts-wrapper

Question

Labels rendering on y and y1 axis labels in the line chart are similar and not as per the data provided. how can I provide the yAxisID to the line chart getting rendered? I am using react-native-charts-wrapper to achieve the same.

The same implementation is being done in web using chart.js. Ref : https://www.npmjs.com/package/chart.js?activeTab=readme

[enter image description here](https://i.stack.imgur.com/PuUDN.png)

Data and config this is how I am mapping my api response to a suitable data configuration.

const chartData = {
  dataSets:
    data && data?.dataSets?.length > 0
      ? [
          ...data.dataSets.map((item: IGraphDataSet) => ({
            values: item.data,
            label: "",
            config: {
              ...dataConfig,
              mode: data,
              color: processColor(item.color),
              circleColor: processColor(item.color),
            },
          })),
        ]
      : [],
};

Where datasets array looks like:

[
  {
    color: "#6AABAC",
    data: [
      0, 0, 0, 0, 0, 338.407, 338.407, 338.407, 338.407, 338.407, 338.407,
      338.407,
    ],
    label: "sample label 1",
    yAxisID: "y1",
  },
  {
    color: "#AF8E62",
    data: [0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3],
    label: "sample label 2",
    yAxisID: "y",
  },
];

I need to specify the data to render on y or y1 axis, based on the yAxisID of the datasets array.

this is how I have configured my Line chart component

<LineChart
  key={key}
  style={styles.chart}
  legend={{ enabled: true, form: "NONE" }}
  data={chartData}
  chartDescription={{ text: "" }}
  marker={markerConfig}
  xAxis={{
    ...xAxisConfig,
    position: "BOTTOM",
    valueFormatter: data?.labels,
  }}
  yAxis={yAxisConfig}
  touchEnabled={true}
  dragEnabled={true}
  dragDecelerationEnabled={true}
  dragDecelerationFrictionCoef={0.5}
/>;

I have the following configurations added for chart, x and y axis

export const markerConfig = {
  enabled: true,
  digits: 2,
  markerColor: processColor("grey"),
  textColor: processColor(colors.white),
  textAlign: "center",
  flexWrap: "wrap",
};

export const dataConfig = {
  lineWidth: 2,
  drawFilled: false,
  fillAlpha: 35,
  drawValues: false,
  circleRadius: 2,
  drawCircleHole: false,
};

export const xAxisConfig = {
  granularityEnabled: true,
  granularity: 1,
  textSize: 13,
  drawGridLines: true, //need to show dash lines
  gridLineWidth: 1,
  gridColor: processColor(colors.border),
  axisLineColor: processColor(colors.border),
  textColor: processColor(colors.black),
  fontFamily: fonts.regular,
  drawLabels: true,
  labelRotationAngle: -90,
  avoidFirstLastClipping: false,
};

export const yAxisConfig = {
  left: {
    granularityEnabled: true,
    granularity: 0.1,
    textSize: 13,
    textColor: processColor(colors.black),
    fontFamily: fonts.regular,
    drawLabels: true,
    drawGridLines: true,
    gridColor: processColor(colors.border),
    drawAxisLines: false,
  },
  right: {
    granularityEnabled: true,
    granularity: 0.1,
    textSize: 13,
    textColor: processColor(colors.black),
    fontFamily: fonts.regular,
    drawLabels: true,
    drawGridLines: true,
    gridColor: processColor(colors.border),
    drawAxisLines: false,
  },
};

Additional the only difference between the data configuration of web and mobile is that of the yAxisId. How can we provide the same in the Line chart.
Example of how data is configured in web:

const getDataSet = (dataSets) => {
  return dataSets.map((item) => {
    return {
      label: item.label,
      data: item.data,
      borderColor: item.color,
      backgroundColor: item.color,
      pointRadius: 3,
      yAxisID: item.yAxisID,
    };
  });
};

Specifications Version: react-native-charts-wrapper : 0.5.5 Platform: iOS