Adding lines dynamically in a Line Chart

[MarkForLoop]

I am trying to get this Line Chart

I noticed that it in the array it need to know the keys/values for the for the example I have 4 currently have but it could have more keys/values

if anyone can direct me in the right path it would be greatly appreciated

const data = [
  {
    "date": "2023-12-04T00:00:00.000Z",
    "Design": 12,
    "Marketing": 44,
    "Development": 6,
    "IT & Software": 88,
  },
  {
    "date": "2024-01-04T00:00:00.000Z",
    "Design": 60,
    "Marketing": 30,
    "Development": 20,
    "IT & Software": 12000,
  },
  {
    "date": "2024-02-04T00:00:00.000Z",
    "Design": 220,
    "Marketing": 110,
    "Development": 110,
    "IT & Software": 10,
  },
  {
    "date": "2024-03-04T00:00:00.000Z",
    "Design": 1220,
    "Marketing": 4420,
    "Development": 2320,
    "IT & Software": 12000,
  }
]

This is what I have done so far

        <ResponsiveContainer width='100%' height='100%'>
          <LineChart data={data}>
            <CartesianGrid
              strokeDasharray='10 10'
            />
            <XAxis
              dataKey='date'
              tickLine={false}
              axisLine={false}
              padding={{ left: 0, right: 0 }}
              tickMargin={8}
            />

            <YAxis
              tickLine={false}
              axisLine={false}
              className='text-xs text-muted-foreground'
              padding={{ top: 0, bottom: 0 }}
              tickMargin={8}
            />

            {data?.map((el) => {
              if (el.date) return null;

              return Object.keys(el ?? {}).map((item) => {
                return (
                  <Line
                    key={item}
                    type='monotone'
                    dataKey={item}
                    strokeWidth={2}
                    activeDot={{ r: 8 }}
                  />
                );
              });
            })}
          </LineChart>
        </ResponsiveContainer>

[MarkForLoop]

I figured it out

  const array: string[] = [];
  data?.forEach((el) => {
    Object.keys(el)
      .filter((item) => {
        return item != 'date';
      })
      .map((key) => {
        if (key != 'date' && !array.includes(key))
          array.push(key);
      });
  });

then instead of mapping on the data do this

         {productArray.map((item) => {
              return <Line key={item} dataKey={item} type='monotone' />;
            })}