How to resolve error Type 'ChangeEvent<unknown>' is not assignable to type 'ChangeEvent<MouseEvent>'. Using React and TypeScript

In App.tsx the Material UI’s Pagination component receives an onchange inside it. However, when passing it to the component I am getting the following error: Argument of type ‘ChangeEvent’ is not assignable to parameter of type ‘ChangeEvent’. Type ‘unknown’ is not assignable to type ‘MouseEvent’.

To solve the problem I tried using just only onChange={handleChange}, but as i am using TypeScript i need to pass the type in the parameter. I too tried using onChange={(e) => handleChange(e, page)}, but, dont worked.

I expected that clicking on the ">" icon would go to the next page changing to the cards of the new page. And when clicking on the icon "<" went to the previous page changing to the card. And that the same would happen when clicking on the pagination number.

import React, { useState } from "react";
import {
  Pagination,
  Box,
  Button,
  Card,
  CardActionArea,
  CardActions,
  CardContent,
  CardMedia,
  Grid,
  Typography
} from "@mui/material";
import { usePagination } from "./UsePagination";
import { default as data } from "./DATA.json";

export default function App() {
  let [page, setPage] = useState(1);
  const PER_PAGE = 6;
  const count = Math.ceil(data.length / PER_PAGE);
  const _DATA = usePagination(data, PER_PAGE);
  const handleChange = (
    event: React.ChangeEvent<MouseEvent>,
    pageCurrent: number
  ) => {
    setPage(pageCurrent);
    _DATA.jump(pageCurrent);
  };

  return (
    <Box sx={{ flexGrow: 1, margin: "0 2rem" }}>
      <Pagination
        count={count}
        size="large"
        page={page}
        variant="outlined"
        shape="rounded"
        // onChange={handleChange}
        onChange={(e) => handleChange(e, page)}
      />
      <Grid
        container
        justifyContent="center"
        spacing={{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8 }}
        className="GRID1"
      >
        {data.map((item, id) => {
          return (
            <Grid
              item
              xs={12}
              sm={6}
              md={4}
              lg={3}
              xl={2}
              sx={{
                display: "flex",
                justifyContent: "center",
                marginTop: "1rem"
              }}
            >
              <Card
                key={item.id}
                sx={{
                  p: "1rem",
                  boxShadow: 4,
                  maxWidth: {
                    xs: "250px",
                    sm: "250px",
                    md: "280px",
                    lg: "300px",
                    xl: "300px"
                  }
                }}
              >
                <CardActionArea>
                  <CardMedia component="img" height="140" image={item.img} />
                  <CardContent>
                    <Typography gutterBottom variant="h5" component="div">
                      {item.title}
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      Lizards are a widespread group of squamate reptiles, with
                      over 6,000 species, ranging across all continents except
                      Antarctica
                    </Typography>
                  </CardContent>
                </CardActionArea>
                <CardActions>
                  <Button size="small">Favorite</Button>
                </CardActions>
              </Card>
            </Grid>
          );
        })}
      </Grid>
    </Box>
  );
}

let [page, setPage] = useState(1) is a state that tells which page to start paging on.

const PER_PAGE = 6 stores the number of cards shown per page.

const count = Math.ceil(data.length / PER_PAGE) stores the number of pages.

Link CodeSandBox

Ps: The data is coming from a mocked .json.

>Solution :

According to MUI document for Pagination component, it seems that React.ChangeEvent<unknown> is the type you are looking for.

// onChange
// Callback fired when the page is changed.

function(event: React.ChangeEvent<unknown>, page: number) => void

// event: The event source of the callback.
// page: The page selected.

Example you can try for your use case:

const handleChange = (
    event: React.ChangeEvent<unknown>,
    pageCurrent: number
  ) => {
    setPage(pageCurrent);
    _DATA.jump(pageCurrent);
  };