How to scroll all flatlists nested in a section list?

Question

I have a FlatList nested in a SectionList as shown below. There is always 3 sections (rows) and each section has a FlatList with a horizontal scroll.

Expected

On button click, invoking the scrollToEnd() function, to scroll all 3 flatlists from each section to end.

Problem

Only the bottom or last flatlist scrolls to the end.

I cannot figure out why this is - I thought the ref in the flatlist may only be referencing the last Flatlist rendered and not the other two, maybe? If so, any tips or suggestions are welcome. Thank you.

             ...

             const flatlistRef = useRef();

             const scrollToEnd = () => {
                flatlistRef.current.scrollToEnd({ animating: true });
             };
             
             ...

             <SectionList
                    contentContainerStyle={styles.sectionListContainer}
                    stickySectionHeadersEnabled={false}
                    sections={myData}
                    renderSectionHeader={({ section }) => (
                        <>
                            <FlatList
                                horizontal
                                data={section.data}
                                contentContainerStyle={
                                    styles.flatlistContainer
                                }
                                renderItem={({ item }) => (
                                    <Button
                                        onPress={() => updateData(item.id)}
                                    >
                                        <ListItem item={item} />
                                    </Button>
                                )}
                                showsHorizontalScrollIndicator={false}
                                ref={flatlistRef}
                            />
                        </>
                    )}
                    renderItem={({}) => {
                        return null;
                    }}
                />

Answer 1

I have also working on this but I found a solution where I can create a Section.List by using react-native-paper .

But you can also use the map function, Here is the code of that

 import React from "react";
 import {View,Text} from "react-native";

 const App = () =>{
     return(
         <View style={{flex: 1}}>
     {data.map((item, index) => (
         <View key={index} style={{borderBottomColor: 'black', borderBottomWidth: 2}}>
             <Text style={{fontSize: 30, fontWeight: 'bold'}}>{item.title}</Text>
             {item.items && <>
             {item.items.map((item, index) => (
                 <View key={index} style={{backgroundColor: '#7fc', borderBottomColor: 'blue', borderBottomWidth: 2}}>
                  <Text style={{fontSize: 20, marginLeft: 40, color: 'blue'}}>{item.title}</Text>
                      {item.items && <>
                      {item.items.map((item, index) => (
                        <View key={index}  style={{backgroundColor: 'yellow', borderBottomColor: 'red', borderBottomWidth: 2}}>
                            <Text style={{fontSize: 16, marginLeft: 80,}}>{item.title}</Text>
                        </View>
                     ))}
                    </>}
                </View>
             ))}
            </>}
         </View>
      ))}
 </View>
     )
 }
 export default App;

I hope It will help.