title: Adding A button before the previousLabel Props and after the nextLabel Props in React-Paginate Not Working
body: <p>Please I needed to add a button before the previousLabel property details and after the nextLabel prop details in React-Paginate but what I have below is not working. I have also tried to read the documentation and check all the prop details but still couldn't achieve the result below.</p>
  <p>I want a first button to come before one button and a last button to come after the next button.</p>
  <p><a href="https://i.stack.imgur.com/rppYu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rppYu.jpg" alt="enter image description here" /></a></p>
  <p>what the code below looks like above.</p>
  <p>what I want to achieve below     <a href="https://i.stack.imgur.com/Nwshl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nwshl.jpg" alt="enter image description here" /></a></p>
  <pre><code>``` 
  import React, { useState, useEffect } from 'react'
  import axios from 'axios'
  import ReactPaginate from 'react-paginate';
  import './styles.css'
   
  export default function App() {
   const [postsPerPage] = useState(5);
   const [offset, setOffset] = useState(1);
   const [posts, setAllPosts] = useState([]);
   const [pageCount, setPageCount] = useState(0)
   
   const getPostData = (data) =&gt; {
     return (
       data.map(post =&gt; &lt;div className=&quot;container&quot; key={post.id}&gt;
         &lt;p&gt;User ID: {post.id}&lt;/p&gt;
         &lt;p&gt;Title: {post.title}&lt;/p&gt;
       &lt;/div&gt;)
     )
   
   }
   
   const getAllPosts = async () =&gt; {
     const res = await axios.get(`https://jsonplaceholder.typicode.com/posts`)
     const data = res.data;
     const slice = data.slice(offset - 1 , offset - 1 + postsPerPage)
   
     // For displaying Data
     const postData = getPostData(slice)
   
     // Using Hooks to set value
     setAllPosts(postData)
     setPageCount(Math.ceil(data.length / postsPerPage))
   }
   
   const handlePageClick = (event) =&gt; {
     const selectedPage = event.selected;
     setOffset(selectedPage + 1)
   };
   
   useEffect(() =&gt; {
     getAllPosts()
   }, [offset])
   
   return (
     &lt;div className=&quot;main-app&quot;&gt;
      
       {/* Display all the posts */}
       {posts}
   
       {/* Using React Paginate */}
       &lt;ReactPaginate
         previousLabel={&quot;previous&quot;}
         nextLabel={&quot;next&quot;}
         breakLabel={&quot;...&quot;}
         breakClassName={&quot;break-me&quot;}
         pageCount={pageCount}
         onPageChange={handlePageClick}
         containerClassName={&quot;pagination&quot;}
         subContainerClassName={&quot;pages pagination&quot;}
         activeClassName={&quot;active&quot;} /&gt;
     &lt;/div&gt;
   );
  }
  ```
  </code></pre>
  <p>Below is the css</p>
  <pre><code>.main-app {
    margin: 2% 10%;
    border: 1px ridge #464141;
    padding: 5%;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 20px;
    color: #464141;
   }
      
   .container {
    border-bottom: #fff 2px ridge;
   }
    
   .pagination {
    margin-top: 45px;
    margin-left: -40px;
    display: flex;
    list-style: none;
    outline: none;
   }
    
   .pagination&gt;.active&gt;a {
    background-color: #47ccde;
    color: #fff;
   }
    
   .pagination&gt;li&gt;a {
    border: 1px solid #47ccde;
    padding: 5px 10px;
    outline: none;
    cursor: pointer;
   }
    
   .pagination&gt;li&gt;a, .pagination&gt;li&gt;span {
    color: #47ccde;
    background-color: azure;
   }
  
  </code></pre>