React-Paginate is not clickable

Question

I have been trying to use React-paginate library for pagination, however, the buttons formed by it is not clickable,i don't understand what i am doing wrong
And there are no example given, or no question asked

What would be the correct way of using this pagination

Here is the code of my App.js

    import React, { Component } from 'react';
import './App.css';
import Navbar from '../src/components/navbar/navbar'
import SearchIt from '../src/components/searchField/search'
import Container from 'react-bootstrap/Container'
import Card from '../src/components/cards/cards'
import Axios from 'axios'
import Pagination from '../src/components/pagination/paginating'

class App extends Component {
  state={
    fetchedData:[]
  }

  componentDidMount(){
    Axios.get('http://localhost:3000/1').then((responseData)=>{
      //console.log(responseData.data)
      this.setState({fetchedData:responseData.data})
    }).catch((err)=>{
      console.log(err)
    })
  }
  handlePageClicked = data => {
    let selected = data.selected;
    console.log(selected)    
  };

  render() {

    return (
      <div className="App">
        <Navbar/>
        <Container> 
          <SearchIt/>
          <Card data={this.state.fetchedData}/>
          <Pagination handlePageClick={this.handlePageClicked}/>
        </Container>
      </div>
    );

  }
}

export default App;

And here is the code for paginating.js

   import React,{Component} from 'react'
import ReactPaginate from 'react-paginate';
import './paginateStyle.css'


 const page = (props)=>{
     return(

      <ReactPaginate
          previousLabel={'previous'}
          nextLabel={'next'}
          breakLabel={'...'}
          breakClassName={'break-me'}
          pageCount={10}
          marginPagesDisplayed={2}
          pageRangeDisplayed={5}
          onPageChange={props.handlePageClick}
          containerClassName={'pagination'}
          subContainerClassName={'pages pagination'}
          activeClassName={'active'}
        />

     )
 }

 export default page

These button are not clickable

Answer 1

I did a quick sample and it worked.

import ReactPaginate from 'react-paginate';

const Pagination = (props) => {
return (

<ReactPaginate
  previousLabel={'previous'}
  nextLabel={'next'}
  breakLabel={'...'}
  breakClassName={'break-me'}
  pageCount={10}
  marginPagesDisplayed={2}
  pageRangeDisplayed={5}
  onPageChange={props.handlePageClick}
  containerClassName={'pagination'}
  subContainerClassName={'pages pagination'}
  activeClassName={'active'}
  />

 )
}


class App extends Component {
 state = {
  selectedPage: 0
 }

handlePageClicked = data => {
  let selected = data.selected;
  this.setState({
    selectedPage: selected
  })
  console.log(selected)
};

render() {

return (
  <React.Fragment>
    <div>You selected:  {this.state.selectedPage}</div>

    <div className="App">
      <Pagination handlePageClick={this.handlePageClicked} />
    </div>
  </React.Fragment>
 );

 }
} 

There could be something in paginateStyle.css which is making the Pagination not work properly or some other CSS in your application.

EDIT: From comments, a ui component with higher z index was over them and was not visible/clickable