Mixed Content - Trying to call http api over https

I deployed my app to Netlify when it broke and gave the following error.

Mixed Content: The page at 'https://example.netlify.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ip-api.com/json/'. This request has been blocked; the content must be served over HTTPS.

I tried to call the api with https with no luck.

Here's how I'm calling it:

  useEffect(() => {
    axios.get('http://ip-api.com/json/')
    .then(res => setSearch(prev => ({...prev, ip: res.data.query, city: res.data.city, country: res.data.country, timezone: res.data.timezone, isp: res.data.isp, lat: res.data.lat, lon: res.data.lon, region: res.data.region})))
    .catch(err => console.log(err));
  }, []);