Am trrying to create a graph but getting an error ERROR TypeError: _ReanimatedModule.default.createNode is not a function

Question

Am trying to create a graph using @rainbow-me/animated-charts but am receiving an error _ReanimatedModule.default.createNode despite having saved the dependencies.

This are my installed dependencies

"dependencies": {
"@gorhom/bottom-sheet": "^4.6.1",
"@rainbow-me/animated-charts": "^1.0.0-alpha.6",
"@react-native-async-storage/async-storage": "^1.22.2",
"@react-native-community/datetimepicker": "7.2.0",
"@react-native-masked-view/masked-view": "^0.2.9",
"@react-native-picker/picker": "2.4.10",
"@react-navigation/bottom-tabs": "^6.5.8",
"@react-navigation/drawer": "^6.6.3",
"@react-navigation/material-bottom-tabs": "^6.2.16",
"@react-navigation/material-top-tabs": "^6.6.3",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"@react-navigation/stack": "^6.3.17",
"axios": "^1.6.0",
"expo": "~49.0.8",
"expo-camera": "~13.4.4",
"expo-contacts": "~12.2.0",
"expo-font": "~11.4.0",
"expo-image": "~1.3.5",
"expo-image-picker": "~14.3.2",
"expo-linear-gradient": "~12.3.0",
"expo-status-bar": "~1.6.0",
"firebase": "^10.5.2",
"moment": "^2.30.1",
"react": "18.2.0",
"react-native": "0.72.10",
"react-native-chart-kit": "^6.12.0",
"react-native-gesture-handler": "~2.12.0",
"react-native-pager-view": "^6.2.0",
"react-native-paper": "^5.10.4",
"react-native-qrcode-svg": "^6.3.0",
"react-native-raw-bottom-sheet": "^2.2.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "^4.6.3",
"react-native-screens": "~3.22.0",
"react-native-svg": "^14.1.0",
"react-native-tab-view": "^3.5.2",
"react-native-vector-icons": "^10.0.0",
"react-native-wagmi-charts": "^2.3.2",
"victory-line": "^36.8.4",
"victory-native": "^40.0.4",
"typescript": "^5.1.3",
"@types/react": "~18.2.14"

},

and this my code .

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { ChartDot, ChartPath, ChartPathProvider } from '@rainbow-me/animated-charts';

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

const Demo = () => {
  const [sparkline, setSparkline] = useState([]);

  useEffect(() => {
    const randomData = Array.from({ length: 30 }, (_, index) => ({
      x: index,
      y: Math.random() * 100, 
    }));
    setSparkline(randomData);
  }, []);

  return (
    <ChartPathProvider data={{ points: sparkline, smoothingStrategy: 'bezier' }}>
      <View style={styles.chartWrapper}>
        <View style={styles.chartLineWrapper}>
          <ChartPath height={SIZE / 2} stroke="black" width={SIZE} />
          <ChartDot style={{ backgroundColor: 'black' }} />
        </View>
      </View>
    </ChartPathProvider>
  );
};

const styles = StyleSheet.create({
  chartWrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  chartLineWrapper: {
    width: SIZE,
    height: SIZE / 2,
  },
});

export default Demo;

Despite following the documentation, am still getting the error, I have changed my code from js to tsx. How do I create the graph .