первый вариант пагинации

src/counter.tsx

@@ -16,39 +16,41 @@ export default React.memo(({
 }: propsTS) => {
 
     //Проверка, что пришедшие данные валидны
-    if(count < 0 || current < 0) {return <Text>Указанные значения ниже нуля</Text>}
+    if(count <= 0 || current <= 0) {return <Text>Указанные значения ниже нуля</Text>}
     if(count < current) {return <Text>Текущая страница больше общего числа</Text>}
 
     let a = []
     //Создание списка кнопок идёт поэлементно с лева на право
-    // for (let i = 1; i <= count; i++) {
-        //Создание кнопок происходит в любом случае <-
-    a.push(<Button key={0} leftIcon={<ArrowBackIcon/>}/>)
-    //Создание первой кнопки. Происходит в любом случае
-    a.push(<Button key={1}>1</Button>)
 
-    //Создание троеточия
-    if (current > 4) {
+    //Создание кнопки <-
+    a.push(<Button onClick={() => {onPageChange(0)}} key={0} leftIcon={<ArrowBackIcon/>}/>)
+
+    //Создание троеточия и первой кнопки
+    if (current > 3) {
+        a.push(<Button onClick={() => {onPageChange(1)}} key={1}>1</Button>)
+    }
+    if (current > 3) {
         a.push("...")
     }
 
     //Создание 3 кнопок
-    a.push(<Button key={current-1}>{current-1}</Button>)
-    a.push(<Button key={current}>{current}</Button>)
 
+    if (current - 1 !== 0) {
+        a.push(<Button onClick={() => {onPageChange(current - 1)}} key={current-1}>{current-1}</Button>)
+    }
+    a.push(<Button onClick={() => {onPageChange(current)}} key={current}>{current}</Button>)
+    if (current + 1 <= count) {
+        a.push(<Button onClick={() => {onPageChange(current + 1)}} key={current+1}>{current + 1}</Button>)
+    }
 
     //Создание троеточия и последней кнопки
     if (current < (count - 2)) {
         a.push("...")
-    }
-
-    if ( current === count - 2) {
-        console.log("aa")
-        a.push(<Button key={current+1}>{current+1}</Button>)
+        a.push(<Button  onClick={() => {onPageChange(count)}} key={count}>{count}</Button>)
     }
 
     //Кнопка ->
-    a.push(<Button key={count + 1} rightIcon={<ArrowForwardIcon/>}/>)
+    a.push(<Button onClick={() => {onPageChange(count + 1)}} key={count + 1} rightIcon={<ArrowForwardIcon/>}/>)
     // }
 
     return(

src/paginatedList.tsx

@@ -11,10 +11,16 @@ function generation () {
     }
 }
 
-function onPageChange () {console.log()}
 
 export default () => {
-    generation()
+
+    const [page, setPage] = React.useState<number>(1)
+
+    function onPageChange (page: number) {
+        setPage(page)
+        console.log(page)
+    }
+    // generation()
     return(
         <>
             <HStack>
@@ -24,7 +30,7 @@ export default () => {
                 <Box>
                     <Counter
                         count={10}
-                        current={8}
+                        current={page}
                         onPageChange={onPageChange}
                     />
                 </Box>