Hi so I'm trying to grab some json from an api and then populate a table, pretty simple stuff. What's happening is that I can see the "tableData" state being updated as each new row comes in, I'm also logging every time "tableData" is updated, yet maybe .5 seconds after its all done my "tableData" is empty again (check console screenshots)

const [bigChartData, setbigChartData] = React.useState("data1");
  const [tableData, setTableData] = React.useState([]);

  const setBgChartData = (name) => {
    setbigChartData(name);
  };

  const getData = () => {
    axios.get("URL")
      .then(res => {
        const data = res.data.items.forEach(item => {
          setTableData(oldData => [...oldData, {
            data: [
              { text: item.title },
              { text: "asd" + item.url },
              { text: "some links..." }
            ]
          }]);
        });
      })
      .catch(err => console.log(err));

    setTimeout(function () {
      console.log(tableData);
    }, 3000);
  }

  useEffect(() => {
    getData();
  }, []);


  useEffect(() => {
    console.log("Table data updated:");
    console.log(tableData);
  }, [tableData]);