api calls works when its localhost but does not work after deploy to firebase

Question

I have a app that using news api to get a bunch of news article and display it in a page, the app works find when its running localhost, but after deploy to firebase, it wont return any data.

this is my code

import React, { createContext, useEffect, useState } from "react";
import axios from "axios";



export const NewsContext = createContext();

export const NewsContextProvider = (props) => {
  const [data, setData] = useState();
  const apiKey = "xxx";

  useEffect(() => {
    axios
      .get(
        `http://newsapi.org/v2/top-headlines?country=ca&category=health&apiKey=${apiKey}`
      )
      
      .then((response) => setData(response.data))
      .catch((error) => console.log(error));
  }, []);

  return (
    <NewsContext.Provider value={{ data }}>
      {props.children}
    </NewsContext.Provider>
  );
};

import React, { useContext } from "react";
import { NewsContext } from "../NewsContext";
import NewsArticle from "./NewsArticle";
import './news.css'

function News(props) {
  const { data } = useContext(NewsContext);
  console.log(data);

  return (
    <div>
      <h1 className="head__text">Today's News</h1>
      <div className="all__news">
        {data
          ? data.articles.map((news) => (
              <NewsArticle data={news} key={news.url} />
            ))
          : "Loading"}
      </div>
    </div>
  );
}

export default News;

right now on my site, it just shows "loading" which means no data was returned. and i also getting this error : Error: Network Error at t.exports (createError.js:16) at XMLHttpRequest.h.onerror (xhr.js:91)