How to dynamically render multiple <Text> in React-pdf

Question

I have an mainArraywhich is a prop that will dynamically change. And I want my <Document> to have the number of <View> and <Text> increase or decrease dynamically according to that. Can someone help me with that. Thanks!

const MyDocument = (mainArray:any) => {
    return (
        <Document>
            <Page size="A4" style={styles.body}>
                <View style={styles.section}>
                <Text style={styles.title}>Don Quijote de la Mancha</Text>
                </View>
                {/* this is NOT working */}
                <View render={() => (
                   mainArray&& (
                    <View style={styles.section}>
                    {
                        mainArray.map(() => (
                            // eslint-disable-next-line react/jsx-key
                            <Text style={styles.text}>
                                asdasdasdadsdads
                            </Text>
                            )
                        )
                    }
                    </View>
                    )
                )} />
                {/* this is working */}
                <View style={styles.section}>
                {
                    [1,2,3,4].map(() => (
                        // eslint-disable-next-line react/jsx-key
                        <Text style={styles.text}>
                            asdasdasdadsdads
                        </Text>
                        )
                    )
                }
                </View>
                <View style={styles.section}>
                <Text>Section #2</Text>
                </View>
                <View style={styles.section}>
                <Text>Section #2</Text>
                </View>
            </Page>
        </Document>
    );
}```


I tried to use render in `<View>` as well as `<Text>` but <PDFViewer> just keep giving me a blank which I believe an internal Error