Fetching data inside of mapped components

Not sure how best to phrase this question, other than asking for a clean way to do it.

I have an array of objects each containing a name and a URL, i’m mapping over each item so i can fetch data from the URL and display it, however there are hundreds of items, meaning hundreds of fetch requests.

This is what i have:

Index.js:

const fruits = [
  { name: "apple", url: "http://foo" },
  { name: "banana", url: "http://bar" },
];

const App = () => {
  return fruits.map((fruit) => {
    <FruitContainer fruit={fruit} />;
  });
};

FruitContainer.js

const FruitContainer = (fruit) => {
  const [fruitData, setFruitData] = useState({});

  const getFruitData = async () => {
    const data = await fetch(fruit.url);
    let json = await data.json();
    setFruitData(json);
  };

  useEffect(() => {
    getFruitData();
  }, []);

  return (
    <>
      <Text>{fruitData.name}</Text>
      <Text>{fruitData.color}</Text>
    </>
  );
};