I have 2 APIs. To get data from the first one I use data from the second one as an input. And the data from the second one is a list that can contain 1 or 2 elements. I do understand why I have the problem (because the result can be 1 or 2 then it will render 1 or 2 times) but I do not know how to approach it. I’d appreciate ideas on where to look or what to read about it. I still need to show both results, if the 2nd API returns 2 results.

export const Data = ({ myInput}...
useEffect(() => {... fetching data here with axios.. 
        fetchData();
    }, [myInput]);
   return data;
}

myInput is a string, ListFrom2ndAPI: string[] – can be only 1 or 2 elements.

when I solve it like this, it works, because it doesn’t change number of hooks (sharing just to show that data is being fetched fine):

 const myInput= ListFromSecondAPI? ListFromSecondAPI[0] : '';
 const result= Data({ otherVariable, myInput})?.number;

But if I map it, it when I get the error of a different number of hooks (more or less, depending on what I am choosing):

const results= ListFromSecondAPI?.map(item =>
        Data({ otherVariable, myInput: item })?.number
    );