I have data I'm trying to fetch and use with the code below, however when I am logging the value of records I get an empty array first and my fetched object second. Because of this, I'm unable to access the object's information in my app.

  const [records, setRecords] = useState([]);

 useEffect(() => {
    async function getRecords() {
      const response = await fetch(`http://localhost:5000/record`);

      if (!response.ok) {
        const message = `An error occurred: ${response.statusText}`;
        window.alert(message);
        return;
      }

      const records = await response.json();
      setRecords(records);
    }

    getRecords();

    return;
  }, []);

  console.log(records);