formatLabel на svg-диаграммах отображает неверную информацию (реагирует на нативную информацию)

Question

Я делаю горизонтальную диаграмму. метки на оси y должны соответствовать разным меткам, но когда я пытаюсь прочитать их по индексу, он говорит, что не может прочитать метку. Но когда я набираю число от 0 до 6 вместо индекса, оно отображается 10 раз. В результате должно быть 6 разных ярлыков, а не 10 одинаковых.

Когда я комментирую formatLabel, он отображает числа от 0 до 5 с увеличением на 0,5 каждый раз. Я хочу, чтобы formatLabel была разными метками моих данных, а не цифрами.

Ниже мой код

const data = [
    {
        value: GeneralIncidents.HazardIncidents,
        label: 'Hazard'
    },
    {
        value: GeneralIncidents.NearMissIncidents,
        label: 'Near Miss'
    },
    {
        value: GeneralIncidents.MaintenanceIncidents,
        label: 'Maintenance'
    },
    {
        value: GeneralIncidents.InjuryIncidents,
        label: 'Injury'
    },
    {
        value: GeneralIncidents.PropertyDamageIncidents,
        label: 'Property Damage'
    },
    {
        value: GeneralIncidents.TheftIncidents,
        label: 'Theft'
    },
]

return (
    <View style={styles.mostUsedTagsContainer}>
        <View style={{ flexDirection: 'row', height: 200, paddingVertical: 16 }}>
            <YAxis
                data={data}
                yAccessor={({ index }) => index}
                contentInset={{ top: 10, bottom: 10 }}
                spacing={0.2}
                formatLabel={(_, index) => data[index].label}
            />
            <BarChart
                style={{ flex: 1, marginLeft: 8 }}
                data={data}
                horizontal={true}
                yAccessor={({ item }) => item.value}
                svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
                contentInset={{ top: 10, bottom: 10 }}
                spacing={0.2}
                gridMin={0}
            >
                <Grid direction={Grid.Direction.VERTICAL} />
            </BarChart>
        );