setState przy okazji wielokrotnego fetch'owania

Hej,

w którym miejscu powinienem ustawić 'setCharacters' przy okazji takiej struktury?
Dodatkowo link do sandbox'a : https://nyonw.csb.app/

useEffect(() => {
		const fetchOtherData = (characters) => {
			const charactersWithAllData = [];
			characters.forEach((character) => {
				const homeworld = character.homeworld;
				const species = character.species;
				const vehicles = character.vehicles;
				const starships = character.starships;
				let urls = [homeworld, ...species, ...vehicles, ...starships];

				Promise.all(
					urls.map((url) => {
						if (url.length) {
							fetch(url)
								.then((response) => response.json())
								.then((data) => {
									if (url.search("species") > 0) {
										character.species = data.name;
									}
									if (url.search("planets") > 0) {
										character.homeworld = data.name;
									}
									if (url.search("vehicles") > 0) {
										character.vehicles.shift();
										character.vehicles.push(data.name);
									}
									if (url.search("starships") > 0) {
										character.starships.shift();
										character.starships.push(data.name);
									}
								})
								.catch((err) => console.error(err));
						}
						if (!url.length) {
							if (url.search("species")) {
								character.species = "Unspecified";
							}
							if (url.search("vehicles")) {
								character.vehicles = "";
							}
							if (url.search("starships")) {
								character.starships = "";
							}
						}
					})
				).then(charactersWithAllData.push(character));
			});
			setCharacters(charactersWithAllData);
		};

		const fetchApi = () => {
			const characters = [];
			Promise.all(
				[api].map((api) =>
					fetch(api)
						.then((response) => response.json())
						.then((data) => characters.push(...data.results))
						.then((data) => fetchOtherData(characters))
				)
			);
		};
		fetchApi();
	}, []);

Będę wdzięczny za odpowiedź.

Po pierwsze, to nie trzymaj tego kodu w komponencie. Niech Cię ręka boska broni przed wrzucaniem takiej logiki zaraz w komponent.

Ale jesli już koniecznie chcesz zrobie strzelić w stopę, to zrób tak

const fetchApi = () => {
   return Promise.all(
      [api].map(api =>
         fetch(api)
           .then(response => response.json())
           .then(data => data.results)
           .then(characters => fetchOtherData(characters))
       )
    );
};
fetchApi()
    .then(otherData => // tutaj zrób zapisanie);

A jeśli to Twoje [api] zawsze jest jedno, to zrób tak, dla uproszczenia:

const fetchApi = () => {
   return fetch(api)
           .then(response => response.json())
           .then(data => fetchOtherData(data.results));
};
fetchApi()
    .then(otherData => // tutaj zrób zapisanie);