line graph is not displaying in React Native

I Am using react-native-gifted-charts for displaying line chart and creating the data object for given array. and below is my code where i have done for linechart but lines are not displaying

import React, { useEffect, useState } from 'react';
import { Image, Text, TouchableOpacity, View } from 'react-native';
import arrow_dropdown from '../../../../assets/images/arrow_dropdown.png';
import styles from './Styles';
import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../../../components/dimensions/Index';
import { LineChart } from 'react-native-gifted-charts';
import { Dropdown } from 'react-native-element-dropdown';
import { symptomTracker } from '../../../../services/residentServices/HealthTrackerService';
import moment from 'moment';
import { getAuthData } from '../../../../services/PaymentService';

const SymptomsTrack = ({
  navigation,
  symptom_lookupId,
  onUpdateTitles,
  patient_lookup_id,
}) => {
  const [active, setActive] = useState(false);
  const [active1, setActive1] = useState(false);
  const [filter, setFilter] = useState('month');
  const [placeholder, setPlaceholder] = useState('Monthly');
  const [symptomsTitles, setSymptomsTitles] = useState([]);
  const [lineData, setLineData] = useState([]);
  const d = new Date();
  const colors = [
    '#2980b9',
    '#27ae60',
    '#f39c12',
    '#e74c3c',
    '#8e44ad',
    '#2ecc71',
    '#d35400',
    '#34495e',
  ];
  const filterData = [
    { label: 'Daily', value: 'day' },
    { label: 'Monthly', value: 'month' },
    { label: 'Weekly', value: 'week' },
  ];

  useEffect(() => {
    fetchGraphData();
  }, [symptom_lookupId, filter]);

  const fetchGraphData = async () => {
    const { lookupId, type } = await getAuthData();
    let data = {};
    if (type === 'nurse') {
      data = {
        from_date: moment(d).subtract(1, 'months').format('YYYY-MM-DD'),
        lookup_id: patient_lookup_id,
        symto_lookup_id: symptom_lookupId,
        to_date: moment(d).format('YYYY-MM-DD'),
        type: filter,
      };
    } else {
      data = {
        from_date: moment(d).subtract(1, 'months').format('YYYY-MM-DD'),
        lookup_id: lookupId,
        symto_lookup_id: symptom_lookupId,
        to_date: moment(d).format('YYYY-MM-DD'),
        type: filter,
      };
    }

    try {
      const res = await symptomTracker(data);

      const symptomsArray = res?.symptoms?.map(item => ({
        symptomTitle: item.title,
        lookup_id: item.lookup_id,
      }));
      onUpdateTitles(symptomsArray);

      const groupedSymptomData = {};
      res.data.forEach(item => {
        if (item.symptoms) {
          item.symptoms.forEach(symptom => {
            if (!groupedSymptomData[symptom.lookup_id]) {
              groupedSymptomData[symptom.lookup_id] = {
                data: [],
                color: colors[Object.keys(groupedSymptomData).length % colors.length],
              };
            }
            groupedSymptomData[symptom.lookup_id].data.push({
              value: symptom.value,
              label: new Date(item.modified).toLocaleDateString(),
            });
          });
        }
      });

      const lineDataUpdated = Object.keys(groupedSymptomData).map(key => ({
        data: groupedSymptomData[key].data,
        color: groupedSymptomData[key].color,
      }));

      console.log(JSON.stringify(lineDataUpdated, null, 2)); // Debugging line to check the formatted data

      setLineData(lineDataUpdated);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <>
      <View style={styles.contentContainer}>
        <View
          style={{
            flexDirection: 'column',
            justifyContent: 'space-between',
            paddingBottom: SCREEN_HEIGHT * 0.01,
          }}>
          <Dropdown
            style={styles.container}
            placeholderStyle={styles.container_text}
            selectedTextStyle={styles.container_text}
            iconStyle={styles.iconStyle}
            iconColor={'#1492E6'}
            data={filterData}
            maxHeight={SCREEN_HEIGHT * 0.5}
            labelField="label"
            valueField="value"
            placeholder={placeholder}
            value={filter}
            renderRightIcon={() => (
              <Image source={arrow_dropdown} style={styles.iconStyle} />
            )}
            onChange={item => {
              setFilter(item.value);
            }}
          />
          <Text
            style={[styles.container_text, { marginLeft: SCREEN_WIDTH * 0.01 }]}>
            {moment(d).format('DD MMM YYYY')}
          </Text>
        </View>
        <TouchableOpacity
          style={
            active
              ? [styles.container1, { borderColor: '#4191DF' }]
              : styles.container1
          }
          onPress={() => {
            setActive(true), setActive1(false);
          }}>
          <View style={{ alignItems: 'center' }}>
            <Text style={styles.container_text}>Compare to</Text>
            <Text style={styles.container_text}>Baseline</Text>
          </View>
          <Text style={styles.count_text}>- -</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={
            active1
              ? [styles.container1, { borderColor: '#4191DF' }]
              : styles.container1
          }
          onPress={() => {
            setActive(false), setActive1(true);
          }}>
          <View style={{ alignItems: 'center' }}>
            <Text style={styles.container_text}>Average</Text>
            <Text style={styles.container_text}>Rating</Text>
          </View>
          <Text style={styles.count_text}>- -</Text>
        </TouchableOpacity>
      </View>

      <View style={{ marginTop: 10, alignSelf: 'center' }}>
        {lineData.length > 0 ? (
          <LineChart
            data={lineData}
            height={300}
            width={SCREEN_WIDTH * 0.9}
            thickness={2}
            yAxisTextStyle={{ color: 'black' }}
            xAxisTextStyle={{ color: 'black' }}
            hideAxesAndRules={false}
            showVerticalLines
            yAxisTextNumberOfLines={11} 
            maxValue={10}
            minValue={0}
            spacing={44}
            initialSpacing={0}
            textColor1="green"
            textShiftY={-2}
            textShiftX={-5}
            textFontSize={13}
            showDataPoints
            dataPointsHeight={6}
            dataPointsWidth={6}
            dataPointsRadius={3}
            isAnimated
          />
        ) : (
          <LineChart
            data={[{ value: 0, label: '' }]} // Empty data to show axes
            height={300}
            width={SCREEN_WIDTH * 0.9}
            thickness={2}
            yAxisTextStyle={{ color: 'black' }}
            xAxisTextStyle={{ color: 'black' }}
            hideAxesAndRules={false}
            showVerticalLines
            yAxisTextNumberOfLines={11}
            maxValue={10}
            minValue={0}
            spacing={44}
            initialSpacing={0}
            textColor1="green"
            textShiftY={-2}
            textShiftX={-5}
            textFontSize={13}
          />
        )}
      </View>
    </>
  );
};

export default SymptomsTrack;

Below is the linedata i am genarting from the api respons eiget but lines are not displaying for this below array.

[
  {
    "data": [
      {
        "value": 0,
        "label": "6/3/2024"
      },
      {
        "value": 5,
        "label": "6/19/2024"
      },
      {
        "value": 6,
        "label": "6/19/2024"
      }
    ],
    "color": "#2980b9"
  },
  {
    "data": [
      {
        "value": 0,
        "label": "6/3/2024"
      },
      {
        "value": 7,
        "label": "6/19/2024"
      },
      {
        "value": 3,
        "label": "6/19/2024"
      }
    ],
    "color": "#27ae60"
  },
]