Why do I keep getting this error with React? "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0"

Question

I am working on a weather app, I fetch the data from an API in order to get the weather based on the latitude and longitude given from users' location. The website asks for the user's location on page load but I'm confused why I keep getting this error in the console:

I think the problem is because of the API fetch, but I am not sure and do not have a clear understanding of what is going on.

Here is the code:

import React, { useState, useEffect } from 'react';
import '../PageContent/PageContent.css';

const placeholderImg = 'https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg';

const PageContent = () => {
  let api = '';

  const getLocation = () => {
    if (navigator.geolocation) navigator.geolocation.getCurrentPosition(showPosition);
    else document.body.innerHTML = 'Geolocation not supported.';
  };

  const showPosition = (position) => {
    api = `https://weather-proxy.freecodecamp.rocks/api/current?lat=${Math.round(
      position.coords.latitude,
    )}&lon=${Math.round(position.coords.longitude)}`;
  };

  getLocation();

  // Current date
  var curr = new Date();
  curr.setDate(curr.getDate());
  var date = curr.toISOString().substr(0, 10);

  // USE states

  const [celciusClick, setCelciusClick] = useState(false);
  const [farClick, setFarClick] = useState(true);

  const [weatherInfo, setWeatherInfo] = useState({
    location: '',
    weatherType: '',
    degrees: '',
    pressure: '',
    humidity: '',
    wind: '',
    icon: '',
    original: '',
  });

  useEffect(() => {
    fetch(api)
      .then((res) => res.json())
      .then((obj) => {
        console.log(obj);
        // variables to avoid verbose code
        var pressure = obj['main'].pressure;
        var weatherType = obj['weather'][0].description
          .toLowerCase()
          .split(' ')
          .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
          .join(' ');
        var humidity = obj['main'].humidity + '%';
        var wind = Math.round(obj['wind'].speed) + ' mph';
        var degress = Math.round(obj['main'].temp);
        var icon = obj['weather'][0].icon;
        var original = Math.round(obj['main'].temp);
        var location = obj.name;

        // set info together
        setWeatherInfo({
          weatherType: weatherType,
          degrees: degress,
          pressure: pressure,
          humidity: humidity,
          wind: wind,
          icon: icon,
          original: original,
          location: location,
        });
      });
  }, []);

  const original = weatherInfo.original;
  // convert Far to Celcius .
  const HandleCelcius = () => {
    setFarClick(false);
    setCelciusClick(true);

    weatherInfo.degrees = (((weatherInfo.degrees - 32) * 5) / 9).toFixed(4);
  };
  // convert celcius .
  const HandleFar = () => {
    setCelciusClick(false);
    setFarClick(true);

    weatherInfo.degrees = original;
  };

  return (
    <div className="grid">
      <div className="weather-info">
        <h1>{weatherInfo.location}</h1>
        <h4>
          {weatherInfo.weatherType} <img src={weatherInfo.icon} height="35"></img>{' '}
        </h4>

        <input type="date" id="date" defaultValue={date} />
        <div>
          {weatherInfo.degrees}&#176;
          <button onClick={HandleFar} disabled={farClick}>
            F
          </button>
          <button onClick={HandleCelcius} disabled={celciusClick}>
            C
          </button>
        </div>
      </div>

      <div className="extra-info">
        <table>
          <tr>
            <td>Pressure: {weatherInfo.pressure}</td>
          </tr>
          <tr>
            <td>Humidity: {weatherInfo.humidity}</td>
          </tr>
          <tr>
            <td>Wind: {weatherInfo.wind}</td>
          </tr>
        </table>
        <div className="imgs">
          <div className="img">
            <figure>
              <img src={placeholderImg} width="100" />
              <figcaption>
                <h2>weather for this day</h2>
              </figcaption>
            </figure>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PageContent;