How to use nested renderItem function one inside another

Question

have to use two renderitem function,outer one is of the tab-view and innerone in related to flatlist.Is the possible to achieve this.I am having array of clickables in tabview and again having clickable in the form of flatlist.

  const renderItem = (item, index) => {
    var dataToRender = item["data"];
    const exchangeToRender = item["exchange"];
    const exchangeArrTorender = item["exchangeArr"];
    return (
      <ScrollView style={{ backgroundColor: "white" }}>
        <FlatList
          data={exchangeToRender}
          keyExtractor={(item, index) => index.toString()}
          contentContainerStyle={{
            justifyContent: "flex-start",
            flexDirection: "row",
            paddingHorizontal: 10,
          }}
          renderItem={({ item, index }) => (
            <TouchableOpacity
              onPress={() => {
                console.log(index);
                setindexExchange(index);
              }}
              style={{
                padding: 8,
                borderRadius: 40,
                backgroundColor: indexExchange == index ? "#C3D0D980" : "white",
                margin: 5,
              }}
            >
              <Text
                style={{
                  backgroundColor: "transparent",
                  fontSize: 10,
                  fontWeight: "800",
                }}
              >
                {item}
              </Text>
            </TouchableOpacity>
          )}
        />
        {dataToRender && dataToRender.length ? (
          <>
            <ScrollView
              horizontal={false}
              scrollEventThrottle={16}
              showsHorizontalScrollIndicator={false}
              bounces={false}
            >
              {dataToRender.map((item, index) => (
                <ListComponent
                  key={item.companyName}
                  data={item}
                  index={index}
                  // onClickSellButton={() => buySellRowAction(item, "SELL")}
                  // onClickBuyButton={() => buySellRowAction(item, "BUY")}
                  sendDataToMarketWatch={() => sendDataToMarketWatch(item)}
                  openInstrumentOverview={() => {
                    navigation.navigate("InstrumentOverview", {
                      instrumentData: item,
                    });
                  }}
                />
              ))}
            </ScrollView>
          </>
        ) : null}
      </ScrollView>
    );
  };

Is there any way ,we can do this type problems,or any reference related to this.