react-paginate: Button text color issue when using Bootstrap button classes

Question

I'm using the react-paginate 8.2.0 component in my React application along with Bootstrap for styling. I've encountered an issue with the pagination controls where the "Next/Previous" button text color is not visible when using Bootstrap button classes, particularly when using the "btn btn-primary" class.

Expected Behavior: The "Next/Previous" button should have readable text color and should not be in blue hyperlink, although maintaining users to click on it to navigate to the next page.

Current Behavior: When I apply the "btn btn-primary" class to the "Next/Previous" button, the text color becomes the same as the btn-primary color, making it difficult to read.

Screenshots: Expected Behavior Screenshot Current Behavior Screenshot

Code Snippet:

<ReactPaginate
      className=" pagination justify-content-center gap-4 my-4"
      nextLabel="Next"
      pageCount={info?.pages}
      previousLabel="Prev"
      previousClassName="btn btn-primary"
      nextClassName="btn btn-primary"
      pageClassName ="page-item"
      pageLinkClassName="page-link"
      />

Attempts to Resolve: I've tried adjusting the CSS styles for the pagination controls and Bootstrap button classes, but haven't been able to achieve the desired result without affecting the button functionality.