Erorr in React Native Animated Charts

Вся проблема в библиотеке rainbow-me/animated-charts, если не использовать её то всё работает отлично. Поэтому есть два вопроса, как избавиться от ошибки. Или чем можно заменить данную библиотеку?

App.js:

import React, { useRef, useMemo, useState } from 'react';
import { FlatList, StyleSheet, Text, View, SafeAreaView } from 'react-native';
import ListItem from './components/ListItem';
import Chart from './components/Chart';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
} from '@gorhom/bottom-sheet';

import { SAMPLE_DATA } from './assets/data/sampleData';

const ListHeader = () => (
  <View>
    <View style={styles.titleWrapper}>
      <Text style={styles.largeTitle}>Market</Text>
    </View>
    <View style={styles.divider} />
  </View>
)

export default function App() {
  const [selectedCoinData, setSelectedCoinData] = useState(null);

  const bottomSheetModalRef = useRef(null);

  const snapPoints = useMemo(() => ['40%'], []);

  const openModal = (item) => {
    setSelectedCoinData(item);
    bottomSheetModalRef.current.present();
  }

  return (
    <BottomSheetModalProvider>
      <SafeAreaView style={styles.container}>
        <View>
          <FlatList
            keyExtractor={(item) => item.id}
            data={SAMPLE_DATA}
            renderItem={({ item }) => (
              <ListItem
                name={item.name} 
                symbol={item. symbol}
                currentPrice={item.current_price}
                priceChangePercentage7d={item.price_change_percentage_7d_in_currency}
                logoUrl={item.image}
                onPress={() => openModal(item)}
              />
            )}
            ListHeaderComponent={<ListHeader />}
          />
        </View>
           
      </SafeAreaView>

      <BottomSheetModal
        ref={bottomSheetModalRef}
          index={0}
          snapPoints={snapPoints}
          style={styles.bottomSheet}
      >
        { selectedCoinData ? (
            <Chart 
              currentPrice={selectedCoinData.current_price}
              logoUrl={selectedCoinData.image}
              name={selectedCoinData.name}
              symbol={selectedCoinData.symbol}
              priceChangePercentage7d={selectedCoinData.price_change_percentage_7d_in_currency}
              sparkline={selectedCoinData.sparkline_in_7d.price}
            />
          )
        : null}
      </BottomSheetModal>

    </BottomSheetModalProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },

  titleWrapper: {
    marginTop: 80,
    paddingHorizontal: 16,
  },

  largeTitle: {
    fontSize: 24,
    fontWeight: 'bold',
  },

  divider: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#a9abb1',
    marginHorizontal: 16,
    marginTop: 16,
  },

  bottomSheet: {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: -4,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
});

Chart.js:

import { View, Image, StyleSheet, Text, Dimension } from 'react-native';
import React from 'react';
import { ChartDot, ChatPath, ChartPathProvider, ChartYLabel } from '@rainbow-me/animated-charts';
import { GestureHandlerRootView } from 'react-native-gesture-handler';


export const {width: SIZE} =  Dimension.get('window');

const Chart = ({ currentPrice, logoUrl, name, symbol, priceChangePercentage7d, sparkline }) => {
    const priceChangeColor = priceChangePercentage7d > 0 ? '#34C759' : '#FF3B30';

    const formatUSD = value => {
        'worklet';
        if (value === '') {
            return `$${currentPrice.toLocaleString('en-US', { currency: 'USD' })}`;
        }
    
        const formattedValue = `$${parseFloat(value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}`
        return formattedValue;
    };

    return (

        <GestureHandlerRootView style={{ flex: 1 }}>
            <ChartPathProvider data={{ points: sparkline, smoothingStrategy: 'bezier' }}>
                <View style={styles.chartWrapper}>
                    <View style={styles.titlesWrapper}>
                        <View style={styles.upperTitles}>
                            <View style={styles.upperLeftTitles}>
                                <Image source={{uri: logoUrl}} style={styles.image} />
                                <Text style={styles.subtitle}>{name} ({symbol.toUpperCase()})</Text>
                            </View> 

                            <Text style={styles.subtitle}>7d</Text>
                        </View>

                        <View style={styles.lowerTitles}>
                            <ChartYLabel 
                                format={formatUSD}
                                style={styles.boldTitle}    
                            />
                            {/*<Text style={styles.boldTitle}>${currentPrice.toLocaleString('en-US', { currency: 'USD' })}</Text>*/}
                            <Text style={[styles.title, {color:priceChangeColor}]}>{priceChangePercentage7d.toFixed(2)}%</Text>
                        </View>
                    </View>

                    <View style={styles.chartLineWrapper}>
                        <ChartPath height={SIZE / 2} stroke='black' width={SIZE} />
                        <ChartDot style={{ backgroundColor: 'black' }} />
                    </View>

                </View>
            </ChartPathProvider>
        </GestureHandlerRootView>

    )
}

const styles = StyleSheet.create({
    chartWrapper: {
        marginVertical: 16,
    },

    titlesWrapper: {
        marginHorizontal: 16,
    },

    upperTitles: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },

    upperLeftTitles: {
        flexDirection: 'row',
        alignItems: 'center',
    },

    image: {
        width: 24,
        height: 24,
        marginRight: 4,
    },

    subtitle: {
        fontSize: 14,
        color: '#a9abb1',    },

    lowerTitles: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },

    boldTitle: {
        fontSize: 24,
        color: '#000',
        fontWeight: 'bold',
    },

    title: {
        fontSize: 18,
    },

    chartLineWrapper: {
        marginTop: 40,
    },
});

export default Chart