i created a use effect hook to fetch data from an api and set it to a variable like this:

 const [rich, setData] = useState([]);
  useEffect(() => {
    fetch('http://api.mediastack.com/v1/news?access_key=API_KEY&languages=en&countries=us,gb,ng,-ma,-ar,-qa,-sd')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

after that i tried to render the data out on the screen like this:

<View> {
          rich.data.forEach(item => {
            console.log(item.author);
            <Text>{`data: ${item.author}`}</Text>
            
          })

          }
     </View>

now the issue is that the console.log works but if i put it in the text component like i did, it wouldn't display.