react-infinite-scroll-component stopped working suddenly - reactjs

Question

So, I am having a very unusual issue. I am using the package react-infinite-scroll-component and it worked perfectly before and suddenly stopped working. I have not imported anything new on the page and have stopped working now. I remember it worked perfectly.
These are the imports on the page:
```
import React, { Component } from 'react';
import { Col, Row, Icon, Spin, Radio, Tabs ,Button, Pagination } from 'antd';
import Select, { SelectOption } from '../../../shared/components/uielements/select';
import Box from '../../../shared/components/utility/box';
import LayoutWrapper from '../../../shared/components/utility/layoutWrapper.js';
import Form from '../../../shared/components/uielements/form';
import ActiveProductionClass from './active_production';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { productionByStatus } from '../../actions/edit_production_actions';
// import { Button } from 'antd/lib/radio';
import _ from "lodash";
import InfiniteScroll from 'react-infinite-scroll-component';
```
This is my package.json file:
```
"dependencies": {
"antd": "^3.0.3",
"antd-local-icon": "^0.1.3",
"axios": "^0.18.0",
"azure-storage": "^2.8.2",
"classnames": "^2.2.5",
"clone": "^2.1.1",
"cluster": "^0.7.7",
"dnd-core": "^6.0.0",
"dns": "^0.2.2",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.3",
"fs": "0.0.1-security",
"google-map-react": "^1.0.0",
"history": "^4.7.2",
"html-to-draftjs": "^1.3.0",
"image-to-base64": "^2.0.1",
"immutability-helper": "^2.6.6",
"jquery": "^3.3.1",
"jspdf": "git://github.com/MrRio/jsPDF.git#76edb3387cda3d5292e212765134b06150030364",
"lodash.flow": "^3.5.0",
"net-cluster": "0.0.2",
"nprogress": "^0.2.0",
"nuka-carousel": "^4.2.1",
"password-validator": "^4.0.0",
"phantom-html-to-pdf": "^0.5.6",
"postcss-inline-rtl": "^0.9.8",
"prop-types": "^15.6.1",
"query-string": "^5.1.1",
"react": "^16.3.1",
"react-audio-player": "^0.10.0",
"react-carousel-slider": "^2.0.11",
"react-cookies": "^0.1.0",
"react-cropper": "^1.0.1",
"react-customizable-carousel": "0.0.7",
"react-detect-offline": "^2.1.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dock": "^0.2.4",
"react-dom": "^16.3.1",
"react-draft-wysiwyg": "^1.12.12",
"react-drag-and-drop": "^2.4.0",
"react-grid-gallery": "^0.4.11",
"react-image-crop": "^3.0.11",
"react-infinite-scroll-component": "^4.1.0",
"react-intl": "^2.3.0",
"react-loading-components": "^1.1.12",
"react-modal-video": "^1.1.2",
"react-pdf": "^3.0.5",
"react-placeholder": "^2.0.0",
"react-quill": "^1.2.7",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.0",
"react-router-navigation-prompt": "^1.8.0",
"react-router-redux": "^5.0.0-alpha.5",
"react-scripts": "1.0.17",
"react-sidebar": "^2.3.2",
"react-sliding-pane": "^2.0.2",
"react-smooth-scrollbar": "^8.0.6",
"react-soundplayer": "^1.0.4",
"react-textarea-count": "^1.0.3",
"react-throttle": "^0.3.0",
"react-truncate": "^2.3.0",
"react-window-size-listener": "^1.0.10",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0",
"repl": "^0.1.3",
"reqwest": "^2.0.5",
"simple-react-validator": "0.0.7",
"smooth-scrollbar": "^8.2.5",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3",
"video-react": "^0.10.4",
"yargs": "^11.0.0"
},
"devDependencies": {
"react-alice-carousel": "^1.10.1",
"react-app-rewired": "^1.4.0"
},
```
I am rendring it like this:
```
return (
<InfiniteScroll
dataLength={this.state.activeProduction_data.length} //This is important field to render the next data
next={this.loadMore}
hasMore={true}
loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>}
endMessage={
<p style={{textAlign: 'center'}}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large">
<LayoutWrapper>
<Box>
<Form>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={24} sm={24} xs={24} >
<Tabs defaultActiveKey={this.state.defaultKey} onChange={this.typeChange} tabBarExtraContent={operations}>
<TabPane tab="LIVE" key="1"></TabPane>
<TabPane tab="DRAFT" key="2"></TabPane>
<TabPane tab="ARCHIVED" key="3"></TabPane>
</Tabs>
</Col>
</Row>
<Row style={rowStyle} gutter={gutter} justify="start">
{this.state.activeProduction_data.length > 0 ?
<ActiveProductionClass onArchiveClick={this.onArchiveClick} /* onCardClick={this.onCardClick} */ activeProductionData={this.state.activeProduction_data} />
: <div style={{ textAlign: "center", width: "100%" }}>{this.state.selected_type == 1 ? 'No Live Productions.' : ''}{this.state.selected_type == 2 ? 'No Draft Productions.' : ''}{this.state.selected_type == 3 ? 'No Archived Productions.' : ''}</div>}
</Row>
</Form>
</Box>
</LayoutWrapper>
</Spin>
</InfiniteScroll>
);
```
I have removed everything from the page and tried the one you gave in the example and I checked that nothing was still working. Does anyone have any idea which of the package is hindering with the performance?
I tried a little troubleshooting and checked that the package works but the loadmore function is not being called. I say this because the property loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>} in Infinitescroller works as i can see the spin on page. But when i scroll down on the page the loadmore function should call which is not getting called now and was working fine before.
Please help me guys! thanks!!!