I have a ReChart based program, this program consumes an API that gives some information about indicators, each indicator is one Line element in my chart, the problem here is that I don't know how many indicators comes in API response, maybe 1, maybe 2, maybe x indicators. I can't set up the number of Line elements since code, I need to set the number of lines after my API call. Is there any solution to this issue?

This is my code:

 return (
<div className="flex-row-reverse">
  <div className="w-1/4 bg-gray-600">
    Aqui iria el select o algo por el estilo
  </div>
  <div className="w/3/4">
    <ResponsiveContainer id="container" width={"100%"} height={400}>
      <LineChart
        data={data}
        margin={{ top: 30, right: 30, left: 30, bottom: 30 }}
      >
        <CartesianGrid />
        <XAxis type="number" dataKey="time" domain={["dataMin", "dataMax"]}>
          <Label
            value={"Time"}
            position="bottom"
            style={{ textAnchor: "middle" }}
          />
        </XAxis>
        <YAxis>
          <Label
            value={"Indicadores"}
            position="left"
            angle={-90}
            style={{ textAnchor: "middle" }}
          />
        </YAxis>
        <Tooltip />
        <Line
          dataKey="AguaCo2"
          name="AguaCo2"
          unit={"L"}
          dot={false}
          type={"natural"}
        />
        <Line
          dataKey="Co2O3"
          name="Co2O3"
          unit={"L"}
          dot={false}
          type={"natural"}
        />
      </LineChart>
    </ResponsiveContainer>
  </div>
</div>

);

This code has two Line elements, but I need that Lines goes adding from de API response.