How to customize yAxis value from 1000 to 1K using <Linechart> in react-native-wrapper

Question

I m modifying the example provided by react-native-chart-wrapper. And i think the YAxis value is too long, so i tried to shorten it a little using K. And Maybe modify it some more later using M, B and T. Here is what i've tried:

import React, {useState, useEffect} from 'react';
import {StyleSheet, View, processColor} from 'react-native';
import {LineChart} from 'react-native-charts-wrapper';

const LineChartScreen = () => {
  const [data, setData] = useState({});

  useEffect(() => {
    const chartData = [
      {
        values: [
          {x: 0, y: 33000000},
          {x: 1, y: 1433541},
          {x: 2, y: 48100},
          {
            x: 3,
            y: 8579471,
          },
          {x: 4, y: 1001500000},
          {
            x: 5,
            y: 6800000,
          },
        ],
        label: 'Amount',
        config: {
          lineWidth: 2,
          drawValues: true,
          drawCircles: true,
          drawCircleHole: false,
          highlightColor: processColor('#33CFFF'),
          color: processColor('#33CFFF'),
          circleColor: processColor('#33CFFF'),
        },
      },
    ];

    setData({
      dataSets: chartData,
    });
  }, []);

  const formatYAxisValues = (value) => {
    if (value >= 1000) {
      return (value / 1000).toFixed(1) + 'K';
    }
    return value.toString();
  };

  const xAxis = {
    valueFormatter: ['a', 'b', 'c', 'd', 'e', 'f'],
    granularityEnabled: true,
    granularity: 1,
    position: 'BOTTOM',
  };

  const yAxis = {
    left: {
      drawGridLines: true,
      valueFormatter: data.dataSets
        ? data.dataSets[0].values.map((el) => formatYAxisValues(el.y))
        : [],
      axisMinimum: 0,
    },
    right: {
      enabled: false,
    },
  };

  return (
    <View style={{flex: 1}}>
      <View style={styles.container}>
        <LineChart
          style={styles.chart}
          data={data}
          chartDescription={{text: ''}}
          legend={{
            enabled: true,
            form: 'SQUARE',
            formSize: 8,
            xEntrySpace: 10,
            yEntrySpace: 5,
            textSize: 12,
          }}
          xAxis={xAxis}
          yAxis={yAxis}
          drawGridBackground={false}
          borderColor={processColor('teal')}
          borderWidth={1}
          drawBorders={true}
          autoScaleMinMaxEnabled={false}
          touchEnabled={true}
          dragEnabled={true}
          scaleEnabled={true}
          scaleXEnabled={true}
          scaleYEnabled={true}
          pinchZoom={true}
          doubleTapToZoomEnabled={true}
          highlightPerTapEnabled={true}
          highlightPerDragEnabled={false}
          dragDecelerationEnabled={true}
          dragDecelerationFrictionCoef={0.99}
          keepPositionOnRotation={false}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 500,
    backgroundColor: '#F5FCFF',
  },
  chart: {
    flex: 1,
  },
});

export default LineChartScreen;

The Linechart will show properly but the YAxis will only show the first Y which is 33000K, and not the other. I can't find any answer in the issue on the github page of the package, nobody answer there. The valueFormatter wont accept function, Anybody know the proper way to do it?