With react-native-svg-charts I can't see the linechart on the screen

I'm trying to show graph in my screen. I took data from BLE and show but I can't make graph with my BLE values. I wrote graph code into Service component. Because, BLE values ​​are within the characteristic value. I am giving some sample codes.

And this is my screen.

This is my Service Component code;

const granted =  PermissionsAndroid.request(  PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,  {    title: 'Permission Localisation Bluetooth',    message: 'Requirement for Bluetooth',    buttonNeutral: 'Later',    buttonNegative: 'Cancel',    buttonPositive: 'OK',  });type ServiceCardProps = {  service: Service;};// eslint-disable-next-line @typescript-eslint/no-unused-varsconst UART_SERVICE_UUID = '6E400001-B5A3-F393-­E0A9-­E50E24DCCA9E'.toLowerCase();const data2 = [80, 10, 95, 48, 24, 67, 51, 12, 33, 0, 24, 20, 50];const ServiceCard = ({ service }: ServiceCardProps) => {  const [descriptors, setDescriptors] = useState<Descriptor[]>([]);  const [characteristics, setCharacteristics] = useState<Characteristic[]>([]);  const [data,setData] = useState<Characteristic[]>([]);  const [areCharacteristicsVisible, setAreCharacteristicsVisible] = useState(    false,  );  useEffect(() => {    const getCharacteristics = async () => {      const newCharacteristics = await service.characteristics();      setCharacteristics(Object(newCharacteristics));      setData(Object(newCharacteristics));      newCharacteristics.forEach(async (characteristic) => {        const newDescriptors = await characteristic.descriptors();        setDescriptors((prev) => [...new Set([...prev, ...newDescriptors])]);      });    };    getCharacteristics();  }, [service]);  return (<View ><View style={styles.container}        onLayout={() => {          setAreCharacteristicsVisible((prev) => !prev);        }}><Text style={styles.container}>{`ECG`}</Text></View><View >      {areCharacteristicsVisible &&        characteristics &&        characteristics.map((char) => (<><CharacteristicCard  key={char.id} char={char} /><LineChart            style={{ height: 300 }}            gridMin={0}            gridMax={300}            data={characteristics}            svg={{ stroke: 'rgb(105, 105, 105)' }}            contentInset={{ top: 0, bottom: 0 }}></LineChart></>        ))}</View></View>  );};const styles = StyleSheet.create({  container: {    backgroundColor: 'white',    marginBottom: 12,    borderRadius: 16,    shadowColor: 'rgba(60,64,67,0.3)',    shadowOpacity: 0.4,    shadowRadius: 10,    elevation: 4,    padding: 12,  },});export { ServiceCard };

And Screen code;

const DeviceScreen = ({  route,  navigation,}: StackScreenProps<RootStackParamList, 'Device'>) => {  // get the device object which was given through navigation params  const { device } = route.params;  const data2 = [80, 10, 95, 48, 24, 67, 51, 12, 33, 0, 24, 20, 50];  const [isConnected, setIsConnected] = useState(false);  const [services, setServices] = useState<Service[]>([]);  const [data, setData] = useState<Service[]>([]);  // handle the device disconnection  const disconnectDevice = useCallback(async () => {    navigation.goBack();    const isDeviceConnected = await device.isConnected();    if (isDeviceConnected) {      await device.cancelConnection();      navigation.navigate('Home');    }  }, [device, navigation]);  useEffect(() => {    const getDeviceInformations = async () => {      // connect to the device      const connectedDevice = await device.connect();      setIsConnected(true);      // discover all device services and characteristics      const allServicesAndCharacteristics = await connectedDevice.discoverAllServicesAndCharacteristics();      // get the services only      const discoveredServices = await allServicesAndCharacteristics.services();      setServices(discoveredServices);      setData(discoveredServices);       PermissionsAndroid.request(        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,        {          title: 'Permission Localisation Bluetooth',          message: 'Requirement for Bluetooth',          buttonNeutral: 'Later',          buttonNegative: 'Cancel',          buttonPositive: 'OK',        }      );           };      getDeviceInformations();    device.onDisconnected(() => {      navigation.navigate('Home');    });    // give a callback to the useEffect to disconnect the device when we will leave the device screen    return () => {      disconnectDevice();      navigation.navigate('Home');    };     }, [device, disconnectDevice, navigation]);  return (<ScrollView contentContainerStyle={styles.container}><TouchableOpacity style={styles.button} onPress={disconnectDevice}><Text style={{fontFamily:"SairaExtraCondensed-Thin",textAlign:"center",fontSize:15,color:"white"}}>Antrenmanı Sonlandır</Text></TouchableOpacity><View><View style={styles.header} ><Text>{`Name : ${device.name}`}</Text><Text>{`Is connected : ${isConnected}`}</Text></View><View>        {services &&          services.map((service) => <ServiceCard service={service} />           )}</View></View><View></View></ScrollView>  );};

I am trying solve this issue for a long time. What is the problem?Thanks