I have an issue with displaying data coming from an API on the chart which is coming from Recharts library. In order to achieve that I am trying to make use of Object.entries . This is my API structure : {"deviceId":"27ff89713e684bbd8f13820c53908e79","G1HNQ3":97,"BBPF0F":-220} Values of those properties are not static and keep changing. For any advice of fixing this problem I would be very grateful,

Thank you

Please take a look at my code:

import "./App.css";
import React, { Component } from "react";
import logo from "./Logo.jpg";
import axios from "axios";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";

class App extends Component {
  state = { data: [] };

  componentDidMount() {
    const dataInterval = setInterval(this.getData, 1000);
  }

  componentDidUpdate() {
    console.log(this.state.data);
  }

  
  getData = async () => {
    await axios.get("/random-data").then((res) => {
      this.setState({
        data: [
          ...this.state.data,
          res.data,
          { currentDateTime: Date().toLocaleString() },
        ],
      });
    });
  };

  renderLine = () => {
    Object.entries(this.state.data).forEach(([key, value]) => {
      Object.entries(value).forEach(([key, value]) => {
        if (key === "deviceId" || key === typeof Number) {
          return;
        }
        return <Line type="monotone" dataKey={key} stroke="red" />;
      });
      //
    });
  };

  render() {
    return (
      <div
        className="App"
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <img src={logo} alt="BromleySat" />
        <h1 style={{ color: "green" }}>BromleySat's Serial Plotter</h1>
        <LineChart width={1000} height={300} data={this.state.data}>
          <CartesianGrid></CartesianGrid>
          <XAxis dataKey="currentDateTime"></XAxis>
          <YAxis></YAxis>
          <Tooltip></Tooltip>
          <Legend></Legend>
          {this.renderLine()}
        </LineChart>
      </div>
    );
  }
}

export default App;