I'm making a movie and I want to add pagination in the MoviesFromGenre component. Initially, MoviesFromGenre gets rendered based on the id from GenresList. I want to add Pagination but I don't know how to update the state in useReducer when I click next/prev buttons?

import React, { useEffect, useReducer, useState } from 'react';
import { useParams } from 'react-router-dom'
import axios from 'axios';
import { API_URL, API_KEY } from '../api/config.js';
import Movies from './Movies'

const initialState = {
  loading: true,
  error: '',
  movies: []
};

const reducer = (state, action ) => {
  switch(action.type) {
    case 'FETCH_SUCCESS':
      return {
        loading: false,
        movies: action.payload,
        error: '',
      };
    case 'FETCH_ERROR':
      return {
        loading: false,
        movies: [],
        error: 'Error'
      };
    default:
      return state;
  }
};


function MoviesFromGenre () {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { id } = useParams();
  const [pageNumber, setPageNumber] = useState(1)
  useEffect(() => {
    axios
      .get(
        `${API_URL}discover/movie?api_key=${API_KEY}&language=en-US&with_genres=${id}`
      )
      .then(response => {
        dispatch({
          type: 'FETCH_SUCCESS',
          payload: response.data
        })
      })
      .catch(err => {
        dispatch({
          type: 'FETCH_ERROR'
        })
      })
  }, [])

  const nextPage = () => {
    axios
      .get(
        `${API_URL}discover/movie?api_key=${API_KEY}&language=en-US&with_genres=${id}&page=${pageNumber}`
      )
      .then(response => {
        console.log(response.data)
      })
    setPageNumber(pageNumber+1)
  }

  const prevPage = () => {
    axios
      .get(
        `${API_URL}discover/movie?api_key=${API_KEY}&language=en-US&with_genres=${id}&page=${pageNumber}`
      )
      .then(response => {
        console.log(response.data)
      })
    setPageNumber(pageNumber-1)
  }

  return (
    <div>
      <Movies state={state}/>
      <button onClick={prevPage}>Prev</button>
      <button onClick={nextPage}>Next</button>
    </div>
  )
}

export default MoviesFromGenre;

I created a repository on GitHub.

I want to update the movies state when I click on next or prev buttons.