react-paginate class applied but not getting the styles

Question

i use react-paginate package and for styling, I use styled-components in the react-paginate docs, it says to give the container a class I should use the className property for CSS in js libraries like styled components and for normal CSS I should use containerClassName I used both of them but none worked for styled-components the problem is it's getting the class i.e .container class but the styles won't apply the other classes like .active works but it's just the .container which is not getting the styles here's the code

import ReactPaginate from "react-paginate";
import styled from "styled-components";
const StyledReactPaginate = styled(ReactPaginate)`
  a {
    cursor: pointer;
  }
  .active {
    background: lime;
  }
  .container{
  display: flex;
  }
`;
const Pagination = (props) => {
  return (
    
      <StyledReactPaginate
        previousLabel={props.previousLabel}
        nextLabel={props.nextLabel}
        pageCount={props.pageCount}
        onPageChange={props.onPageChange}
        activeClassName={"active"}
        className={"container"}
      />
 
  );
};

export default Pagination;