When you try to log 'data' it is not defined there cause you created it inside a function (getEssayData). It is available only in that function. You shoul use useState to set the data which will be available anywhere in the component.

    const [data, setData] = useState(null);

  useEffect(() => {
    async function getEssayData() {
      const res = await fetch("/essayData.json");
      const data = await res.json();
      setData(data); // Save the fetched data in the state
    }
    getEssayData();
  }, []);

  // Log the fetched data when it is available
  useEffect(() => {
    if (data) {
      console.log("Fetched Data: ", data);
      console.log("First item: ", data[0]);
    }
  }, [data]);