React Recharts BarChart

Started with Recharts, using this library for the first time. I have a problem. I need to display consumption by channel by date.

The problem is that the data is not distributed each on its own date.

That is, data for all channels and for all dates are displayed on the date 02.01

I need to display data for two channels for each date.

I receive data array from the server like this

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"
  }
]

Date comes in Unix Timestamp format, no problem with that, I format it ( it's January 2nd, 3rd and 4th).

My try (code):

<ResponsiveContainer width="100%" height={385}>
            <BarChart height={300} data={data?.channel_consumption_detail}>
              <CartesianGrid vertical={false} />
              <XAxis
                key="channel_number"
                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[i]}></Bar>
              ))}
            </BarChart>
          </ResponsiveContainer>

This is my first time working with this library. I don't know how to make it look right