Firebase API react.js Null response? - reactjs

Question

Hi guys so this is a search React JS web page I developed recently, and up until earlier this morning it was working fine. So, it basically uses axios to obtain json data from a Firebase Realtime Database and displays the information on the web page using a data table.
import React, { useState, useEffect } from "react";
import axios from "axios";
import DataTable from "react-data-table-component";
const Search = () => {
const [data, setData] = useState([]);
const [resetPaginationToggle, setResetPaginationToggle] = useState(false);
const [filterText, setFilterText] = useState("");
const [error, setError] = useState("");
//------------Function that fetches data from Firebase Database API/JSON data-----------
const loadData = async () => {
try {
axios
.get(
`https://ojt-thesis-e37ae-default-rtdb.asia-southeast1.firebasedatabase.app/thesis-titles.json`
)
.then((response) => {
setData(Object.values(response.data));
})
.catch((err) => console.log(err));
} catch (error) {
setError(error.message);
}
};
//--------------------------------------------------------
const columns = [
{
name: "ID",
center: true,
selector: (row) => row.id,
sortable: true,
},
{
name: "Title",
center: true,
selector: (row) => row.title,
sortable: true,
},
{
name: "Category",
center: true,
selector: (row) => row.category,
sortable: true,
},
{
name: "Department",
center: true,
selector: (row) => row.department,
sortable: true,
},
];
// ----------------------THE ERROR IS COMING FROM THIS FUNCTION---------------
const filteredItems = data.filter(
(item) =>
item.title && item.title.toLowerCase().includes(filterText.toLowerCase())
);
//------------------------------------------------------------------
const subHeaderComponentMemo = React.useMemo(() => {
return (
<>
<input
type="text"
value={filterText}
onChange={(e) => setFilterText(e.target.value)}
placeholder="Search by title"
style={{border:"1px solid black",borderRadius:"10px",padding:"15px",width:"300px"}}
/>
</>
);
}, [filterText, resetPaginationToggle]);
console.log(data);
useEffect(() => {
loadData();
}, []);
return (
<div style={{overflow:"auto"}}>
<DataTable
columns={columns}
data={filteredItems}
subHeader
pagination
paginationResetDefaultPage={resetPaginationToggle}
paginationPerPage={30}
subHeaderComponent={subHeaderComponentMemo}
persistTableHead
/>
</div>
);
};
export default Search;
It seems to have worked fine a while ago but now when I try to run it using npm Nothing appears on the screen. Upon checking the web console for errors and I got the following below which all leads to one function or variable of mine which I isolated above in the code
It keeps notifying me that item.title is null and doesn't contain data? I tested the API and it does give me the json data response as expected. But my program doesn't seem to be saving it into the "data" useState variable I declared at the top. Is this due to a cause on my API's end? or am I not updating the setData properly. I'm just confused if maybe I took something out that was fairly important. I'm kind of at a loss at this point.