Некорректное отображение данных по датам в React Recharts

Впервые пользуюсь библиотекой Reacharts.

Нужно построить график потребления воды по датам и по каналам.

Но у меня отображает только по первой дате, остальные не пойму почему, нет.

В самом низу поста загрузил картинку как отображает график сейчас.

Вот таким образом ко мне приходят данные сервера.

data.channel_consumption_detail = [
  {
  channel_number: 1,
  consumption: 1231,
  date: 100000,
  id_channel: "сb-1312"
  },
  {
  channel_number: 1,
  consumption: 1234,
  date: 200000,
  id_channel: "сb-1312",
  },
  {
  channel_number: 1,
  consumption: 1234,
  date: 300000,
  id_channel: "сb-1312"
  },
  {
  channel_number: 2,
  consumption: 800,
  date: 100000,
  id_channel: "сb-1314"
  },
  {
  channel_number: 2,
  consumption: 823,
  date: 200000,
  id_channel: "сb-1314"
  },
  {
  channel_number: 2,
  consumption: 1233,
  date: 300000,
  id_channel: "сb-1314"
  }
]

Каналов может приходить больше, то есть заранее неизвестно сколько их будет. В этом случае их 2 (channel_number: 1 и channel_number: 2).

Даты в формате Unix Timestamp, с этим проблем нет, я их корректно форматирую. Здесь получаются 3 даты (02.01, 03.01, 04.01).

Отображаются данные только за 02.01, а нужно чтобы по всем датам.

Вот мой код, уже несколько часов потратил, не могу сделать корректное отображение данных по датам

<ResponsiveContainer width="100%" height={385}>
            <BarChart height={300} data={data?.channel_consumption_detail}>
              <CartesianGrid vertical={false} />
              <XAxis
                dataKey="date"
                tickFormatter={(tick) => convertTimestampToDate(tick, 'dd.MM')}
                allowDuplicatedCategory={false}
              />
              <YAxis dataKey="consumption" />
              {data?.channel_consumption_detail.map((el: any, i: any) => (
                <Bar data={[el]} dataKey="consumption" key={el.channel_number}></Bar>
              ))}
            </BarChart>
          </ResponsiveContainer>

Картинка с графиком