React pagination on scroll

Question

i have to implement chat system in react i m doing it first time and i m stuck.i have to pass page no to backend api to get new data every time.and i have to pass page no to api on scroll. i m using [1]: https://www.npmjs.com/package/react-infinite-scroller

i m getting total data count and 9 data array per page from api.scroll upto which total count is available and when user scroll to top is should load more.i have tried lots of module but failed to implement pagination on scroll.using react-infinite-scroll module i m getting page no but its not working as i want.Please suggest me right way of doing it

here is my component code

        const mapStateToProps = state => ({
          users: state.sidebarUser.users,
          total:state.sidebarUser.total,
          routing: state.routing,
          converSationId: state.getConversationId.data
        });
        const mapDispatchToProps = dispatch => ({
          loadUserList: (page={}) => (dispatch(getSideBarUser(page))),
          getConversationId: (userId) =>
            dispatch(getConversationId(userId)),
          loadUserContent: id => dispatch(UserChatList(id))
        });
        class SidebarContainer extends Component {
          constructor(props) {
            super(props);
            this.state={
              isLoading:false,
              sidebar:[],
              page:0,
              hasMore: true,
            }
            this.getPosts=this.getPosts.bind(this);
          }



          componentDidMount() {
            const {
              location: { search }
            } = this.props.routing;
            let userId = new URLSearchParams(search).get("id");
            this.props.loadUserList({page:1});
            this.setState({page:this.state.page+1});
            this.props.getConversationId(userId);
          }

          getPosts(page) {
            console.log("pgae---->",page)
            console.log("this.props--->",this.props.users)
            this.props.loadUserList({page:page});
          }

          render() {
            const { users } = this.props;
            const {hasMore,sidebar} =this.state;
              return (
              <div className="chatting-user-list-section" ref={(ref) => this.scrollParentRef = ref} >
                <InfiniteScroll
                    initialLoad={false}
                    pageStart={0}
                    loadMore={this.getPosts.bind(this)}
                    hasMore={hasMore}
                    getScrollParent={() => this.scrollParentRef}
                    threshold={520}
                    loader={<div className="loader">Loading ...</div>}>
                    <SidebarComponent users={users} listClicked={this.listClicked} />
                  </InfiniteScroll>
              </div>)
          }
        }

        export const Sidebar = connect(
          mapStateToProps,
          mapDispatchToProps
        )(SidebarContainer)

and here is my Reducer

 import { SIDEBAR_USERS_SUCCESS, SIDEBAR_USERS_FAILURE } from './ActionTypes';
    const initialState = {
        users: [],
        total: 0
    }
    export const sidebarUser = (state = initialState, { type, payload }) => {
        switch (type) {
            case SIDEBAR_USERS_SUCCESS: {
                return { ...state, ...payload };
            }
            case SIDEBAR_USERS_FAILURE: {
                return { ...state, error: payload }
            }
            default:
                return state;
        }
    };