Pagination Amount Per Page Drop Down in React-Native not working - react-native

Question

I am trying to add pagination function for the web in React Native. Essentially I have two issues.
I have linked the data to the page numbers, so it is calculating the number of pages correctly, but the pages don't change when I hit the arrow to the next page.
The page selection dropdown doesn't work. I can change the number in the code to show a specific number of items on the page, but not through the dropdown on the page.
Page Numbers changing when I manually change how many to display per page
I've included some of the code below that relates to this.
import React, { useEffect, useState } from 'react';
import { StyleSheet, ActivityIndicator, Text, View, FlatList, Modal, Dimensions } from 'react-native';
import Moment from 'react-moment';
import { DataTable } from 'react-native-paper';
import { AntDesign } from '#expo/vector-icons';
import TaskView from '../components/TaskView';
import { Switch } from 'react-native-paper';
import DropDownPicker from 'react-native-dropdown-picker'
import { RFValue } from "react-native-responsive-fontsize";
const window = Dimensions.get("window");
const screen = Dimensions.get("screen");
const numberOfItemsPerPageList = [1, 5, 10, 25, 50, 100];
function TaskList(props) {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [modalVisible, setModalVisible] = useState(false);
const [dimensions, setDimensions] = useState({ window, screen });
const [id, setId] = useState('');
const moment = require('moment');
const [toggle, setToggle] = useState(false);
const [items, setItems] = useState([]);
const [value, setValue] = useState([]);
const [open, setOpen] = useState(false);
const [page, setPage] = useState(1);
const [numberOfItemsPerPage, onItemsPerPageChange] = useState(numberOfItemsPerPageList[1]);
const [currentPage, setCurrentPage] = useState(1);
const indexOfLastItem = currentPage * numberOfItemsPerPage;
const indexOfFirstItem = indexOfLastItem - numberOfItemsPerPage;
const currentItems = dataSet.slice(indexOfFirstItem, indexOfLastItem);
const dataLength = filteredData.length;
const totalPages = Math.ceil(dataLength / numberOfItemsPerPage);
return (
<View style={styles.mainContainer}>
<View style={styles.switchContainer}>
<Text style={styles.switchText}>Future Defer Dates:</Text>
<Switch value={toggle} onValueChange={toggleSwitch} />
</View>
<DropDownPicker
placeholder='Filter'
items={items}
open={open}
setOpen={setOpen}
value={value}
setValue={setValue}
multiple={true}
mode='BADGE'
badgeDotColors={["blue", "green", "red", "orange", "pink", "yellow", "brown", "violet"]}
onClose={filterData}
/>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setModalVisible(!modalVisible);
}}
>
<View style={styles.modal}>
<View style={styles.closeCircle}>
<AntDesign name="closecircleo" size={26} color="black" onPress={() => setModalVisible(false)} />
</View>
<TaskView task={id} />
</View>
</Modal>
<DataTable>
**<DataTable.Pagination
page={page}
// onClick={}
totalItems={dataLength}
numberOfPages={totalPages}
onPageChange={page => setCurrentPage(currentPage+1)}
selectPageDropdown={numberOfItemsPerPageList}
label={`${currentPage} of ${totalPages} pages`} //text # of # pages
selectPageDropdownLabel={'Tasks per page'} //text next to task amount number drop down
numberOfItemsPerPageList={numberOfItemsPerPageList} //task amount number drop down
showFastPaginationControls //arrows to the first and last page
numberOfItemsPerPage={numberOfItemsPerPage}
onItemsPerPageChange={onItemsPerPageChange}
/>**
<DataTable.Header style={{ position: 'sticky', top: '0px', backgroundColor: "#eaeaea", zIndex: 1 }}>
<DataTable.Title><Text style={{ fontSize: 30, fontWeight: 'bold', position: 'absolute', color: 'black' }}>Task</Text></DataTable.Title>
<DataTable.Title><Text style={{ fontSize: 30, fontWeight: 'bold', position: 'absolute', color: 'black' }}>Due Date</Text></DataTable.Title>
<DataTable.Title><Text style={{ fontSize: 30, fontWeight: 'bold', position: 'absolute', color: 'black' }}>Status</Text></DataTable.Title>
<DataTable.Title><Text style={{ fontSize: 30, fontWeight: 'bold', position: 'absolute', color: 'black' }}>Category</Text></DataTable.Title>
</DataTable.Header>
{isLoading ? <ActivityIndicator /> : (
<FlatList
data={filterData()}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<DataTable.Row onPress={() => showModal(item.id)}>
<DataTable.Cell>
<AntDesign name="rightsquare" size={14} color="black" style={{ marginRight: 15 }} />
{item.name}
</DataTable.Cell>
<DataTable.Cell>
<Moment format="MMMM Do YYYY">{item.due_date}</Moment>
</DataTable.Cell>
<DataTable.Cell>
{item.status.status}
</DataTable.Cell>
<DataTable.Cell>
{item.category.name}
</DataTable.Cell>
</DataTable.Row>
)
}
/>
)}
</DataTable>
</View>
);
};
/>