I am trying to plot my step data on a bar chart so that it looks like health connect bar Chart

with key features being x axis has step intervals of 0,4,8,12,16,20,24 and if my data is at 5:30 then it is plotted in between 4 and 8 without a label

this is my current code which simply adds the data to nearest value and doesnt plot in between

const generateDayData = dayData => {
  const groupedData = {
    '0am': 0,
    '4am': 0,
    '8am': 0,
    '12pm': 0,
    '4pm': 0,
    '8pm': 0,
    '12am': 0,
  };

  dayData.forEach(({date, value}) => {
    const hour = new Date(date).getHours();
    if (hour >= 0 && hour < 4) groupedData['0am'] += value;
    else if (hour >= 4 && hour < 8) groupedData['4am'] += value;
    else if (hour >= 8 && hour < 12) groupedData['8am'] += value;
    else if (hour >= 12 && hour < 16) groupedData['12pm'] += value;
    else if (hour >= 16 && hour < 20) groupedData['4pm'] += value;
    else if (hour >= 20 && hour < 24) groupedData['8pm'] += value;
  });

  return Object.keys(groupedData).map(label => ({
    value: groupedData[label],
    label,
    frontColor: groupedData[label] > 0 ? '#ea735c' : '#444', // Green if has data, gray if 0
  }));
};

My Bar chart looks like this

  import {BarChart, LineChart} from 'react-native-gifted-charts';
 const barData = generateDayData(dayData);
  <BarChart
                    isAnimated
                    barWidth={12}
                    noOfSections={3}
                    barBorderRadius={4}
                    frontColor="lightgray"
                    data={barData}
                    yAxisSide={1}
                    yAxisThickness={0}
                    xAxisThickness={1}
                    xAxisLength={SCREEN_WIDTH}
                    xAxisLabelTextStyle={{
                      color: '#6b7280',
                      fontSize: responsiveSize(12),
                      fontWeight: '400',
                    }}
                    spacing={35}
                    initialSpacing={10}
                    showHorizontalLines
                    xAxisColor="#CBD5E1"
                    horizontalLinesColor="#CBD5E1"
                    horizontalLinesType="solid"
                    horizontalLinesWidth={1}
                  />

my api resoinse looks like this pastebin