I'm having two problems my code. The first is that data is undefined, i'm not fetching data from the API. The seccond is that the hook useEffect it's not working as it should, like componendidmount, and it's on a loop re rendering the coponent. this is my code :

import { StatusBar } from 'expo-status-bar';
import React ,{useState,useEffect} from 'react';
import { StyleSheet, Text, View } from 'react-native';



export default function App() {

  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState([]);

  const fetch = async () =>{
    try{
      let data = await fetch("https://api.sampleapis.com/coffee/hot", {method: 'GET'});
      let json = await data.json();
      setUsers(json);
      setLoading(false);
    }
    catch(err){
      console.log("Im catching the error");
      console.log(err);
      setUsers([]);
      setLoading(false);
    }


  }

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



  return (
    <View style={styles.container}>
      {loading?<><Text>Loading...</Text></>:<Text>Data fetched</Text>}
    </View>
  );
}