amplify-js: Network Error when the app calls API.graphQL

When the app is calling api.graphQL after login, I get a network error (More info shown below)

Here is the code i used to test it:

`const [system, setSystem] = useState({}); console.log(“testing”);

useEffect(() => { //https://dev.to/rmuhlfeldner/how-to-use-an-aws-amplify-graphql-api-with-a-react-typescript-frontend-2g79 checkAuthState();

async function getData() {
  console.log("get Data");

  try {
    const QueryData = await API.graphql({query:getQuerySystem,variables:{id:"Lambert"}});
    console.log("test 2");
    setSystem(QueryData);
    console.log(system.Temp);
  } catch (error) {
    console.error("Error fetching todos", error);
   
  }
}
getData();

}, []); async function checkAuthState() { try { await Auth.currentAuthenticatedUser(); console.log(‘✅ User is signed in’); } catch (err) { console.log(‘❌ User is not signed in’); console.error(err); } }`

checkAuthState() function returns : ✅ User is signed in

Screenshot of the error message on the app

If any more info is needed feel free to ask below. Thanks