How can i display data on my react table each second by adding new row per second using react and react hooks?

Question

I am trying to get json data each second to add as a new row in my react table. In the console it seems data is coming up each second but in the UI none of the data is popping up. Couldn't figure out why any of that table row in not being displayed. The snippet below does not work in stackoverflow please use the sandbox for running the code.

import React, { useState, useEffect } from "react";
import { useTable } from "react-table";
// import "./styles.css";

const API_DATA_RETURNED = [
  {
    // I tried id: "1" as well
    id: "1",
    name: "TEMP001",
    serialNum: "Temp Sensor",
    status: "Active",
  },
  {
    id: "2",
    name: "TEMP002",
    serialNum: "Temp Sensor",
    status: "Unknown",
  },
  {
    id: "3",
    name: "HUM003",
    serialNum: "Humidity Sensor",
    status: "Active",
  },
  {
    id: "4",
    name: "HUM004",
    serialNum: "Humidity Sensor",
    status: "Active",
  },
  {
    id: "5",
    name: "HUM005",
    serialNum: "Humidity Sensor",
    status: "Active",
  },
];

function SensorTable({ columns, data }) {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({ columns, data });

  // Render the UI for your table
  return (
    <table {...getTableProps()} style={{ border: "solid 1px blue" }}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                {...column.getHeaderProps()}
                style={{
                  borderBottom: "solid 3px red",
                  background: "aliceblue",
                  color: "black",
                  fontWeight: "bold",
                }}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return (
                  <td
                    {...cell.getCellProps()}
                    style={{
                      padding: "10px",
                      border: "solid 1px gray",
                      background: "papayawhip",
                    }}
                  >
                    {cell.render("Cell")}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function SensorContainer() {
  const [page, setPage] = useState(0);
  const [sensors, setSensors] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    function loadData(index) {
      console.log("loadData called");

      let newData = sensors;
      console.log(newData);
      newData.push(API_DATA_RETURNED[index]);
      setSensors(newData);
      console.log(sensors);

      setLoading(false);
    }
    setLoading(true);
    // GET sensor list from API

    const timer = window.setInterval(() => {
      if (page < API_DATA_RETURNED.length) {
        loadData(page);
        setPage(page + 1);
      }
    }, 1000);

    return () => window.clearInterval(timer);
  }, [page, sensors]); // This is self is componentDidMount

  const columns = React.useMemo(
    () => [
      {
        Header: "ID",
        accessor: "id", // accessor is the "key" in the data
      },
      {
        Header: "Name",
        accessor: "name",
      },
      {
        Header: "Serial Number",
        accessor: "serialNum",
      },
      {
        Header: "Status",
        accessor: "status",
      },
    ],
    []
  );

  if (sensors.length === 0 && !loading) {
    return <div>No Senors data available</div>;
  }

  return (
    <div>
      {loading && <span>Please wait we are fetching data</span>}
      <SensorTable columns={columns} data={sensors} />
    </div>
  );
}
export default function App() {
  return <SensorContainer />;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Same CODE in sandbox