React Paginate Second Instance on same page does not re render
<p>I am using react-paginate for pagination and I have two instances on the same page. One on top and one on the bottom, when new prop is received only top one is re-rendered. Below is the code, I have checked the different lifecycle methods on the component if it receives new props and render method is called, all seems to be working but in the page only top pagination works meaning if I click on Page 2, second instance should also change to Page 2 because it received a new value for selected page. Any thoughts?  </p>

<pre><code> import React from 'react';
 import ReactPaginate from 'react-paginate';

    export default class Pager extends React.Component {
      constructor() {
        super();
      }

      render() {

        return (
          &lt;div className={`pager ${this.props.position}`}&gt;
            &lt;ReactPaginate 
              previousLabel={'Prev'}
              nextLabel = {'Next'}
              breakLabel = {&lt;a href=""&gt;...&lt;/a&gt;}
              breakClassName = {"break-me"}
              pageCount = {this.props.totalPages}
              marginPagesDisplayed ={1}
              pageRangeDisplayed={2}
              onPageChange = {this.props.onPageNumberClick}
              containerClassName = {"page-links-container"}
              pageLinkClassName = {"pg-links"}
              activeClassName = {"active"} 
              previousClassName = {"prev-pg-lnk"}
              nextClassName = {"next-pg-lnk"}
              disabledClassName = {"disabled"}
              initialPage = {parseInt(this.props.selectedPage) -1}
              /&gt;
          &lt;/div&gt;
        );
      }
    }
</code></pre>