how to display json data from different apis on each FlatList. here there is a flatlist of flatlists in the HeaderComponent and the other FlatList, because currently it displays the same data in the two FlatLists

‘ function BeritaTerkini (){ const [isLoading, setLoading] = useState(true); const [data, setData] = useState([]); const [data2, setData2] = useState([]); const getTerkini = async () => { try { const response = await fetch('https://mpcms.merahputih.com/api/post?page=1&rpp=20'); const json = await response.json(); setData(json.data); } catch (error) { console.error(error); } finally { setLoading(false); } } const getHeadline = async () => { try { const response = await fetch('https://mpcms.merahputih.com/api/post?page=1&rpp=1'); const json = await response.json(); setData(json.data); } catch (error) { console.error(error); } finally { // setLoading(false); } } useEffect(() => { getHeadline(); getTerkini(); }, []); const HeaderComponent = () => ( <View> <FlatList data={isLoading ? [] : data} keyExtractor={({ id }, index) => id} renderItem={({ item }) => ( <View style={{padding:15,backgroundColor:"#eeeeee",flex:1, width:'100%'}}> <Image style={styles.imageThumnail} source={require('../assets/coba.jpg')} /> <Text style={{ lineHeight:24, fontWeight:'600', width:'90%',color: '#fff', bottom: 40, alignSelf: 'center', fontSize:18, position: 'absolute',}}> SuperCel Rilis Trailer Squad Buster Bertabur Bintang </Text> </View> )} ListEmptyComponent={() => isLoading && <ActivityIndicator />} /> <View style={{paddingLeft:25,paddingRight:25,paddingTop:20,paddingBottom:20, backgroundColor:'#fff'}}> <Text style={{ lineHeight:24, fontWeight:'600', width:'90%',color: '#000', fontSize:18, }}> Terkini </Text> </View> </View> ); return ( <View stle={{flex:1, width:'100%'}}> <FlatList data={isLoading ? [] : data} ListHeaderComponent={HeaderComponent} keyExtractor={({ id }, index) => id} renderItem={({ item }) => ( <View style={{backgroundColor:'#fff',paddingLeft:25,paddingRight:25}}> <View style={styles.boxArtikel}> <View style={{flexDirection: 'column',width:'40%',height:125,backgroundColor:'#fff'}}> <Image style={styles.imageArtikelLeft} source={{uri: item.cover }} /> </View> <View style={{flexDirection: 'column', width:'56%',height:150,backgroundColor:'#fff',paddingLeft:12}}> <Text style={{ lineHeight:24,color: 'black',fontSize:16, fontWeight:'600'}}> {item.title}</Text> </View> </View> </View> )} ListEmptyComponent={() => isLoading && <ActivityIndicator />} /> </View> ); }‘