FlatList Next and previous page React Native

so i want to make Next and previous page but in a table, in the table you can only show 3 type of header and when you go to the next index you change the header text, and when you change the next page the data that shown also change because different header, different datathats the goal, but i don't know if i should make different header or put just 1 heade

Expo Snack for live Code: https://snack.expo.dev/@mikess/excel-page

My Code:

NewTableScreen:

   import React, {useState} from 'react'import { Dimensions, FlatList, ScrollView, Pressable } from 'react-native'import { Div, ScrollDiv, Text, Icon } from 'react-native-magnus'import { heightPercentageToDP, widthPercentageToDP } from 'react-native-responsive-screen'const dataDummy = [    {        key: 1,        name: "Tommy",        chart: "10",        char2: "20",        chart3: "30",        number: "100",        number2: "2000",        number3: "2000",     },    {        key: 2,        name: "William",        chart: "10",        char2: "20",        chart3: "30",        number: "100",        number2: "2000",        number3: "2000",     },    {        key: 3,        name: "Robert",        chart: "10",        char2: "20",        chart3: "30",        number: "100",        number2: "2000",        number3: "2000",     }]const renderChart = ({ item }) => (<><Div        py={14}        bg="white"        row        borderBottomWidth={1}        borderColor="#c4c4c4"        rounded={0}>        {/* <Div flex={3}><Text fontWeight="normal" textAlign="center" >            {item.name}</Text></Div> */}<Div flex={3}><Text fontWeight="normal" textAlign="center">            {item.chart}</Text></Div><Div flex={3}><Text fontWeight="normal" textAlign="center">            {item.char2}</Text></Div><Div flex={3}><Text fontWeight="normal" textAlign="center">            {item.chart3}</Text></Div><Div flex={3}><Text fontWeight="normal" textAlign="center">            {item.number}</Text></Div><Div flex={3}><Text fontWeight="normal" textAlign="center">            {item.number2}</Text></Div><Div flex={3}><Text fontWeight="normal" textAlign="center">            {item.number3}</Text></Div></Div></>  )const renderSingle = ({ item }) => (<><Div        py={14}        bg="white"        row        borderBottomWidth={1}        borderColor="#c4c4c4"        rounded={0}><Div flex={3}><Text fontWeight="normal" textAlign="center" >            {item.name}</Text></Div></Div></>  )const singleHeader = (title: string, title1: string, title2:string) => {    return (<Div        py={18}        row        bg="red"        mt={25}><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center">            Name</Text></Div></Div>    )  }  const NewTabelScreen = () => {  const windowWidth = Dimensions.get("window").width  const [pageCurrent, SetPageCurrent] = useState(1)  const [index, setIndex] = React.useState(0)  const onScrollEnd = (e: any) => {    let contentOffset = e.nativeEvent.contentOffset    let viewSize = e.nativeEvent.layoutMeasurement    let pageNum = contentOffset.x / viewSize.width    setIndex(pageNum)  }  const header = (title: string, title1: string, title2:string, title3: string, title4: string,title5: string) => {    return (<Div><Div row justifyContent='flex-end'><Pressable onPress={() => handlePreviousPage()}><Icon               name='left'              fontFamily='AntDesign'              fontSize={24}              color='#000'            /></Pressable><Pressable onPress={() => handleNextPage()}><Icon               name='right'              fontFamily='AntDesign'              fontSize={24}              color='#000'            /></Pressable></Div><Div          py={18}          row          bg="red"><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center">              {title}</Text></Div><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center">              {title1}</Text></Div><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center">              {title2}</Text></Div><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center">              {title3}</Text></Div><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center">              {title4}</Text></Div><Div flex={3}><Text color="white" fontWeight="bold" textAlign="center">              {title5}</Text></Div></Div></Div>    )  }  const handlePreviousPage = () => {    console.log("Clicked Previous Page", pageCurrent)    SetPageCurrent(pageCurrent - 1 < 1 ? 1:pageCurrent - 1)  }  const handleNextPage = () => {    console.log("Clicked Next Page", pageCurrent)    SetPageCurrent(pageCurrent + 1 )  }  return (<Div bg='#979797' row flex={1} p={10}><FlatList      style={{width: widthPercentageToDP(30) }}     data={dataDummy}     renderItem={renderSingle}     keyExtractor={(_, idx: number) => idx.toString()}     ListHeaderComponent={singleHeader}    /><FlatList             style={{ width: windowWidth}}            data={dataDummy}            renderItem={renderChart}            keyExtractor={(_, idx: number) => idx.toString()}            ListHeaderComponent={header("chart", "chart2", "chart3", "number", "number2", "number3")}        /> </Div>  )}export default NewTabelScreen

if you can help me, that will be great and thank you for the help that i can get