Fetch response and parse to json getting html instead of the JSON data at the URL

I am clearly getting HTML here and I can't understand why exactly. This is the function that's expected to fetch the data and parse the URL to json but even though the console shows the URL when using console.log(res) when I try res.json() I get a rejected promise

const fetchData = async () => {
      navigator.geolocation.getCurrentPosition(function(position) {
        setLat(position.coords.latitude);
        setLong(position.coords.longitude);
      });

      await fetch(`${process.env.REACT_APP_API_URL}/weather?lat=${lat}&lon=${long}&units=metric&APPID=${process.env.REACT_APP_API_KEY}`)
      .then(res => console.log(res)) //expected URL appears in the console. 
      
    }
    fetchData();
  }, [lat,long])

I tried res.text() to see the response that's being fetched and >concluded that I am getting the HTML file from the public directory. (I >assumed it was HTML considering the unexpected token.) I don't understand >why it's not parsing to JSON and instead, it's fetching the HTML. console HTML info I see this in the console but am not sure what to do from here

Also in the console of the app I checked fetch('https://ift.tt/3BlA7Rv) and a pending promise was returned. console results

I uploaded the repo for better understanding Is there some confusion happening because of the environmental variables?

from Recent Questions - Stack Overflow https://ift.tt/3jmqbRA
https://ift.tt/eA8V8J