data not getting detected by Label component

[hani-q]

I am using Label in a React Pure Component BarChart. The data is passed as prop. The char renders. But when i tried to use lables as mentioned in examples. It says undefined for data. if i change that data to this.props.data in the label def. It then cannot find x function

import React from 'react';
import { View } from 'react-native';
import { BarChart, Grid, YAxis } from 'react-native-svg-charts';
import { Text } from 'react-native-svg';
import * as scale from 'd3-scale';

import { styles, colors } from '../../styles';

class FiverBarChart extends React.PureComponent {
    render() {
        const CUT_OFF = 50;
        const Labels = ({ x, y, bandwidth, data }) =>
            data.map((value, index) => (
                <Text
                    key={index}
                    x={value > CUT_OFF ? x(0) + 10 : x(value) + 10}
                    y={y(index) + bandwidth / 2}
                    fontSize={14}
                    fill={value > CUT_OFF ? 'white' : 'black'}
                    alignmentBaseline={'middle'}
                >
                    {value}
                </Text>
            ));

        return (
            <View
                style={{
                    flexDirection: 'row',
                    height: 200,
                    margin: 16
                    // paddingVertical: 16
                }}
            >
                <BarChart
                    animate
                    style={{ flex: 1 }}
                    data={this.props.data}
                    horizontal={true}
                    yAccessor={({ item }) => item.value}
                    // svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
                    contentInset={{ top: 10, bottom: 10, left: 20, right: 30 }}
                    spacing={0.2}
                    gridMin={0}
                >
                    <Grid direction={Grid.Direction.VERTICAL} />
                </BarChart>

                <Labels />
                <YAxis
                    svg={{
                        fill: colors.font,
                        fontSize: 14
                    }}
                    data={this.props.data}
                    yAccessor={({ index }) => index}
                    scale={scale.scaleBand}
                    spacing={0.2}
                    formatLabel={(_, index) => this.props.data[index].label}
                />
            </View>
        );
    }
}
export { FiverBarChart };

[robfuncken]

I think you should place the Label component inside the Barchart component?