Not able to add pagination to my react apollo client

Question

I am trying to change the url and get new data when I click on the next button, below is my React code to do so:

import { useMutation, useQuery } from "@apollo/client";
import { pokemonList } from "./query";
import React, { Component } from 'react';
import { useState,useEffect } from "react"; 
import { Link } from 'react-router-dom';
import { makeStyles, Card, CardContent, CardMedia, Typography, CardHeader } from '@material-ui/core';


function PokemonList() {
const classes = useStyles();
let [pageNum, setPageNum] = useState(0);


  const { loading, error, data } = useQuery(pokemonList, { variables: { pageNum: pageNum } });
  
  
  
  if(error) {
    return <h1> error</h1>;
   }
   
   if(loading) {
    return <h1> loading</h1>;
   }
  

  return (
    <div className="App">
      {data.pokemonList.map((data) => (
        
    <Card className={classes.card} variant='outlined'>
                <CardHeader className={classes.titleHead} title={data.id} />
                <CardMedia
                    className={classes.media}
                    component='img'
                    image={data.url}
                    title='image'
                />

                <CardContent>
                    <Typography variant='body2' color='textSecondary' component='span'>
                        <p>{data.name}</p>

                        
            <br/>
            <br/>
            <br></br>

      

                    </Typography>
                </CardContent>
            </Card>

    
      
          
        
      ))}
<Link className='characterlink2' to={`/pokemon/page/${pageNum}`}>
<button>

                        Next
                        </button>
                    </Link>

                    
    
    </div>
  );
}

export default PokemonList;

Below is my backend to get the data:

const resolvers = {
  Query: {
    pokemonList : async (_, args) => {
      let off = args.pageNum * 20;
      const { data } = await axios.get(`https://pokeapi.co/api/v2/pokemon?offset=${off}`);
      console.log(data);
      const a =  data.results.map(img => {
        return {
          id: uuid.v4(),
          name: img.name,
          url: img.url
          
          
          
        }
      })
      return a;
    },
};

I have the button using which I tried to change the url but didnt work, I also tried adding the below code:

useEffect(() => {setPageNum(parseInt(pageNum)+1)},[pageNum])

When I remove the link and add just the button I get new data from my backend but it does not change the url. How can I get this to work?